easycom

傳統(tǒng)vue組件，需要安裝、引用、注冊(cè)，三個(gè)步驟后才能使用組件。easycom將其精簡(jiǎn)為一步。

只要組件路徑符合規(guī)范（具體見(jiàn)下），就可以不用引用、注冊(cè)，直接在頁(yè)面中使用。如下：

<template>
	<view class="container">
		<comp-a></comp-a>
		<uni-list>
		</uni-list>
	</view>
</template>
<script>
	// 這里不用import引入，也不需要在components內(nèi)注冊(cè)u(píng)ni-list組件。template里就可以直接用
	export default {
		data() {
			return {}
		}
	}
</script>

路徑規(guī)范指：

1. 安裝在項(xiàng)目根目錄的components目錄下，并符合components/組件名稱/組件名稱.vue
2. 安裝在uni_modules下，路徑為uni_modules/插件ID/components/組件名稱/組件名稱.vue

工程目錄：

┌─components
│  └─comp-a
│    └─comp-a.vue      符合easycom規(guī)范的組件
└─uni_modules          [uni_module](/plugin/uni_modules.md)中符合easycom規(guī)范的組件
   └─uni_modules
     └─uni-list
       └─components
         └─uni-list
           └─ uni-list.vue

不管components目錄下安裝了多少組件，easycom打包會(huì)自動(dòng)剔除沒(méi)有使用的組件，對(duì)組件庫(kù)的使用尤為友好。

組件庫(kù)批量安裝，隨意使用，自動(dòng)按需打包。以官方的uni-ui為例，在HBuilderX新建項(xiàng)目界面選擇uni-ui項(xiàng)目模板，只需在頁(yè)面中敲u，拉出大量組件代碼塊，直接選擇，即可使用。大幅提升開(kāi)發(fā)效率，降低使用門檻。

在uni-app插件市場(chǎng)下載符合components/組件名稱/組件名稱.vue目錄結(jié)構(gòu)的組件，均可直接使用。

自定義easycom配置的示例

easycom是自動(dòng)開(kāi)啟的，不需要手動(dòng)開(kāi)啟，有需求時(shí)可以在pages.json的easycom節(jié)點(diǎn)進(jìn)行個(gè)性化設(shè)置，如關(guān)閉自動(dòng)掃描，或自定義掃描匹配組件的策略。設(shè)置參數(shù)如下：

如果你的組件，不符合easycom前述的路徑規(guī)范。可以在pages.json的easycom節(jié)點(diǎn)中自行定義路徑規(guī)范。

如果需要匹配node_modules內(nèi)的vue文件，需要使用packageName/path/to/vue-file-$1.vue形式的匹配規(guī)則，其中packageName為安裝的包名，/path/to/vue-file-$1.vue為vue文件在包內(nèi)的路徑。

"easycom": {
  "autoscan": true,
  "custom": {
    "^uni-(.*)": "@/components/uni-$1.vue", // 匹配components目錄內(nèi)的vue文件
    "^vue-file-(.*)": "packageName/path/to/vue-file-$1.vue" // 匹配node_modules內(nèi)的vue文件
  }
}

說(shuō)明

• easycom方式引入的組件無(wú)需在頁(yè)面內(nèi)import，也不需要在components內(nèi)聲明，即可在任意頁(yè)面使用。
• easycom方式引入組件不是全局引入，而是局部引入。例如在H5端只有加載相應(yīng)頁(yè)面才會(huì)加載使用的組件。
• 在組件名完全一致的情況下，easycom引入的優(yōu)先級(jí)低于手動(dòng)引入（區(qū)分連字符形式與駝峰形式）。
• 考慮到編譯速度，直接在pages.json內(nèi)修改easycom不會(huì)觸發(fā)重新編譯，需要改動(dòng)頁(yè)面內(nèi)容觸發(fā)。
• easycom只處理vue組件，不處理小程序?qū)Ｓ媒M件（如微信的wxml格式組件）。不處理后綴為.nvue的組件。因?yàn)閚vue頁(yè)面引入的組件也是.vue組件?？梢詤⒖紆ni ui，使用vue后綴，同時(shí)兼容nvue頁(yè)面。
• nvue頁(yè)面里引用.vue后綴的組件，會(huì)按照nvue方式使用原生渲染，其中不支持的css會(huì)被忽略掉。這種情況同樣支持easycom。
• vue 與 uvue 組件優(yōu)先級(jí)，詳見(jiàn)。

注意這里作者遇到一個(gè)問(wèn)題 如果你引入的組件文件包含package.json 比如MonoRepo項(xiàng)目中

并且配置了 exports 字段 對(duì)外其實(shí)是封閉的 ，導(dǎo)致 easycom 掃描不到組件建議配置

 "./*": "./src/*" 放開(kāi) exports 的限制

  "exports": {
    "./baseCss": "./src/assets/base.css",
    ".": "./src/index.js",
    "./*": "./src/*"
  }
}

npm安裝 uni-ui

在 -項(xiàng)目中可以使用 npm 安裝 uni-ui 庫(kù) ，或者直接在 HBuilderX 項(xiàng)目中使用 npm 。

注意 cli 項(xiàng)目默認(rèn)是不編譯 node_modules 下的組件的，導(dǎo)致條件編譯等功能失效 ，導(dǎo)致組件異常 需要在根目錄創(chuàng)建 vue.config.js 文件 ，增加 @dcloudio/uni-ui 包的編譯即可正常

// 在根目錄創(chuàng)建 vue.config.js 文件，并配置如下
module.exports = {
   transpileDependencies: ['@dcloudio/uni-ui']
}
// 如果是 vue3 + vite, 無(wú)需添加配置

準(zhǔn)備 sass

vue-cli 項(xiàng)目請(qǐng)先安裝 sass 及 sass-loader，如在 HBuliderX 中使用，可跳過(guò)此步。

• 安裝 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 請(qǐng)使用低于 @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 規(guī)則，讓 npm 安裝的組件支持 easycom

打開(kāi)項(xiàng)目根目錄下的 pages.json 并添加 easycom 節(jié)點(diǎn)：

// pages.json
{
	"easycom": {
		"autoscan": true,
		"custom": {
			// uni-ui 規(guī)則如下配置
			"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
		}
	},
	// 其他內(nèi)容
	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 現(xiàn)在只推薦使用 easycom ，如自己引用組件，可能會(huì)出現(xiàn)組件找不到的問(wèn)題

使用 npm 安裝的組件，默認(rèn)情況下 babel-loader 會(huì)忽略所有 node_modules 中的文件 ，導(dǎo)致條件編譯失效，需要通過(guò)配置 vue.config.js 解決：

// 在根目錄創(chuàng)建 vue.config.js 文件，并配置如下
module.exports = {
   transpileDependencies: ['@dcloudio/uni-ui']
}
// 如果是 vue3 + vite, 無(wú)需添加配置

uni-ui 是uni-app內(nèi)置組件的擴(kuò)展。注意與web開(kāi)發(fā)不同，uni-ui不包括基礎(chǔ)組件，它是基礎(chǔ)組件的補(bǔ)充。web開(kāi)發(fā)中有的開(kāi)發(fā)者習(xí)慣用一個(gè)ui庫(kù)完成所有開(kāi)發(fā)，但在uni-app體系中，推薦開(kāi)發(fā)者首先使用性能更高的基礎(chǔ)組件，然后按需引入必要的擴(kuò)展組件。

uni-ui 不支持使用 Vue.use() 的方式安裝

到此這篇關(guān)于vue-cli 模式下安裝 uni-ui的文章就介紹到這了,更多相關(guān)vue cli 安裝 uni-ui內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！