使用UI组件库

刘春龙原创2026/3/5大约 2 分钟

uni-ui 💎

uni-ui是DCloud提供的一个跨端ui库，它是基于vue组件的、flex布局的、无dom的跨全端ui框架。

uni-ui不包括基础组件，它是基础组件的补充。

目前为止，在小程序和混合app领域，uni-ui是性能的标杆。

提示

如果你选择可视化安装使用uni-ui,请参考这里:官当文档

快速使用 👻

在 vue-cli 项目中可以使用 npm 安装 uni-ui 库，或者直接在 HBuilderX 项目中使用 npm 。
提示
注意 cli 项目默认是不编译 node_modules 下的组件的，导致条件编译等功能失效，导致组件异常需要在根目录创建 vue.config.js 文件，增加 @dcloudio/uni-ui 包的编译即可正常
```
// vue.config.js
module.exports = {
	transpileDependencies:['@dcloudio/uni-ui']
}
```
准备 sass
vue-cli 项目请先安装 sass 及 sass-loader，如在 HBuliderX 中使用，可跳过此步。
```
npm i sass -D
npm i sass-loader -D
```
安装 uni-ui
```
npm i @dcloudio/uni-ui --save
```

配置easycom
使用 npm 安装好 uni-ui 之后，需要配置 easycom 规则，让 npm 安装的组件支持 easycom

打开项目根目录下的 pages.json 并添加 easycom 节点：

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

在 template 中使用组件：

<template>
  <uni-badge text="1"></uni-badge>
  <uni-badge text="2" type="success" @click="bindClick"></uni-badge>
  <uni-badge text="3" type="primary" :inverted="true"></uni-badge>
</template>
<script setup>
const bindClick = () => {
  console.log(123);
};
</script>
<style scoped></style>

至此，本章节的学习就到此结束了，如有疑惑，可对接技术客服进行相关咨询。