目录
[npm安装 uni-ui](#npm安装 uni-ui)
[准备 sass](#准备 sass)
[安装 uni-ui](#安装 uni-ui)
easycom
传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。
只要组件路径符合规范（具体见下），就可以不用引用、注册，直接在页面中使用。如下：
<template>
<view class="container">
<comp-a></comp-a>
<uni-list>
</uni-list>
</view>
</template>
<script>
// 这里不用import引入，也不需要在components内注册uni-list组件。template里就可以直接用
export default {
data() {
return {}
}
}
</script>
路径规范指：
- 安装在项目根目录的components目录下，并符合
components/组件名称/组件名称.vue- 安装在uni_modules下，路径为
uni_modules/插件ID/components/组件名称/组件名称.vue
工程目录：
┌─components
│ └─comp-a
│ └─comp-a.vue 符合easycom规范的组件
└─uni_modules [uni_module](/plugin/uni_modules.md)中符合easycom规范的组件
└─uni_modules
└─uni-list
└─components
└─uni-list
└─ uni-list.vue不管components目录下安装了多少组件，easycom打包会自动剔除没有使用的组件，对组件库的使用尤为友好。
组件库批量安装，随意使用，自动按需打包。以官方的uni-ui为例，在HBuilderX新建项目界面选择uni-ui项目模板，只需在页面中敲u，拉出大量组件代码块，直接选择，即可使用。大幅提升开发效率，降低使用门槛。
在uni-app插件市场下载符合components/组件名称/组件名称.vue目录结构的组件，均可直接使用。
自定义easycom配置的示例
easycom是自动开启的，不需要手动开启，有需求时可以在pages.json的easycom节点进行个性化设置，如关闭自动扫描，或自定义扫描匹配组件的策略。设置参数如下：
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| autoscan | Boolean | true | 是否开启自动扫描，开启后将会自动扫描符合components/组件名称/组件名称.vue目录结构的组件 |
| custom | Object | - | 以正则方式自定义组件匹配规则。如果autoscan不能满足需求，可以使用custom自定义匹配规则 |
如果你的组件，不符合easycom前述的路径规范。可以在pages.json的easycom节点中自行定义路径规范。
如果需要匹配node_modules内的vue文件，需要使用packageName/path/to/vue-file-$1.vue形式的匹配规则，其中packageName为安装的包名，/path/to/vue-file-$1.vue为vue文件在包内的路径。
"easycom": {
"autoscan": true,
"custom": {
"^uni-(.*)": "@/components/uni-$1.vue", // 匹配components目录内的vue文件
"^vue-file-(.*)": "packageName/path/to/vue-file-$1.vue" // 匹配node_modules内的vue文件
}
}说明
easycom方式引入的组件无需在页面内import，也不需要在components内声明，即可在任意页面使用。easycom方式引入组件不是全局引入，而是局部引入。例如在H5端只有加载相应页面才会加载使用的组件。- 在组件名完全一致的情况下，
easycom引入的优先级低于手动引入（区分连字符形式与驼峰形式）。 - 考虑到编译速度，直接在
pages.json内修改easycom不会触发重新编译，需要改动页面内容触发。 easycom只处理vue组件，不处理小程序专用组件（如微信的wxml格式组件）。不处理后缀为.nvue的组件。因为nvue页面引入的组件也是.vue组件。可以参考uni ui，使用vue后缀，同时兼容nvue页面。nvue页面里引用.vue后缀的组件，会按照nvue方式使用原生渲染，其中不支持的css会被忽略掉。这种情况同样支持easycom。vue与uvue组件优先级，详见。
注意这里作者遇到一个问题 如果你引入的组件文件包含package.json 比如MonoRepo项目中
并且配置了 exports 字段 对外其实是封闭的 ，导致
easycom 扫描不到组件建议配置
"./*": "./src/*" 放开exports 的限制
"exports": { "./baseCss": "./src/assets/base.css", ".": "./src/index.js", "./*": "./src/*" } }
npm安装 uni-ui
在 -项目中可以使用 npm 安装 uni-ui 库 ，或者直接在 HBuilderX 项目中使用 npm 。
注意 cli 项目默认是不编译
node_modules下的组件的，导致条件编译等功能失效 ，导致组件异常 需要在根目录创建vue.config.js文件 ，增加@dcloudio/uni-ui包的编译即可正常
// 在根目录创建 vue.config.js 文件，并配置如下 module.exports = { transpileDependencies: ['@dcloudio/uni-ui'] } // 如果是 vue3 + vite, 无需添加配置
准备 sass
vue-cli 项目请先安装 sass 及 sass-loader，如在 HBuliderX 中使用，可跳过此步。
-
安装 sass
npm i sass -D 或 yarn add sass -D
-
安装 sass-loader
npm i sass-loader@10.1.1 -D 或 yarn add sass-loader@10.1.1 -D
如果
node版本小于 16 ，sass-loader 请使用低于 @11.0.0 的版本，sass-loader@11.0.0 不支持 vue@2.6.12 如果node版本大于 16 ，sass-loader建议使用v8.x版本
安装 uni-ui
npm i @dcloudio/uni-ui 或 yarn add @dcloudio/uni-ui配置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 中使用组件：
<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>注意
uni-ui 现在只推荐使用 easycom ，如自己引用组件，可能会出现组件找不到的问题
使用 npm 安装的组件，默认情况下 babel-loader 会忽略所有 node_modules 中的文件 ，导致条件编译失效，需要通过配置 vue.config.js 解决：
// 在根目录创建 vue.config.js 文件，并配置如下
module.exports = {
transpileDependencies: ['@dcloudio/uni-ui']
}
// 如果是 vue3 + vite, 无需添加配置uni-ui 是uni-app内置组件的扩展。注意与web开发不同，uni-ui不包括基础组件，它是基础组件的补充。web开发中有的开发者习惯用一个ui库完成所有开发，但在uni-app体系中，推荐开发者首先使用性能更高的基础组件，然后按需引入必要的扩展组件。
uni-ui 不支持使用 Vue.use() 的方式安装