【uniapp】(2) uni-ui组件引入

Muchen灬2026-03-18 10:34

一、通过 uni_modules 单独安装组件

官方文档：https://uniapp.dcloud.net.cn/component/uniui/quickstart.html

如果你没有创建uni-ui项目模板，也可以在你的工程里，通过 uni_modules 单独安装需要的某个组件。下表为uni-ui的扩展组件清单，点击每个组件在详情页面可以导入组件到项目下，导入后直接使用即可，无需import和注册。

（1）前往插件市场导入uni-ui

uni-ui组件插件市场：https://ext.dcloud.net.cn/plugin?id=55

（2）选择插件导入到的项目

耐心等待插件安装

（3）引入uni-ui组件

能够成功显示组件样式就说明成功引入uni-ui组件

html 复制代码

<uni-badge text="1"></uni-badge>
<uni-badge text="2" type="purple"></uni-badge>
<uni-badge text="3" type="primary"></uni-badge>

二、通过npm安装uni-ui

uni-ui 文档：https://uniapp.dcloud.net.cn/component/uniui/quickstart.html

(1) 打开终端安装依赖

javascript 复制代码

'安装uni-ui组件库需要 先安装sass vue-cli 项目请先安装 sass 及 sass-loader'

//安装 sass
1、 npm i sass -D   或   yarn add sass -D   

//安装 sass-loader
2、 npm i sass-loader@10.1.1 -D   或   yarn add sass-loader@10.1.1 -D 

//安装 uni-ui
3、 npm i @dcloudio/uni-ui   或   yarn add @dcloudio/uni-ui

打开终端，安装所需要的依赖

（2）page.json页面中配置easycom

javascript 复制代码

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

（3）页面内使用uni-ui组件

html 复制代码

<uni-badge text="1"></uni-badge>
<uni-badge text="2" type="purple"></uni-badge>
<uni-badge text="3" type="primary"></uni-badge>

成功显示说明引入uni-ui组件成功