目錄
easycom
自定義easycom配置的示例
npm安裝 uni-ui
準備 sass
安裝 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()?的方式安裝
