uni-ui组件时官方网站基于内置组件推出的扩展组件，那么在uni-app项目中我们要如何使用该扩展组件呢？

本文就uni-ui扩展组件的安装和使用给出详细操作流程：

一、uni-ui扩展组件的安装和配置

    1、uni-ui安装

//npm方式
npm i @dcloudio/uni-ui
//yarn方式
yarn add @dcloudio/uni-ui

    注：这里的安装是uni-ui全部组件的安装，若你只需要部分功能。可访问官网，单个导入。

    2、uni-ui在项目根目录下的pages.json中的配置

// pages.json
{
	"easycom": {
		"autoscan": true,
		"custom": {
			// uni-ui 规则如下配置
			"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
		}
	},
	// 其他内容
	pages:[]
}

二、uni-ui页面中的使用

    2.1、数字角标的使用

<template>
	<view>
		<uni-badge class="uni-badge-left-margin" text="1" />
	</view>
</template>

    2.2、弹出层组件带确认按钮

<template>
	<view>
		<button class="button popup-success" @click="dialogToggle('success')"><text class="button-text success-text">成功</text></button>
		<!-- 提示窗示例 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="同意" title="通知" content="欢迎使用 uni-popup!" @confirm="dialogConfirm"
				@close="dialogClose"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>
<script>
	export default {
		data() {
			return {}
		}
		methods: {
			dialogToggle(type) {
				this.msgType = type
				this.$refs.alertDialog.open()
			},
			dialogConfirm(){
				console.log("确认")
			},
			dialogClose(){
				console.log("取消")
			}
		}
	}
</script>

以上是关于uni-ui的简单使用，更多的组件信息及用法。需要您访问官网详细查看。