easycom

傳統vue組件，需要安裝、引用、注冊，三個步驟后才能使用組件。easycom將其精簡為一步。

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

<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>

路徑規(guī)范指：

1. 安裝在項目根目錄的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打包會自動剔除沒有使用的組件，對組件庫的使用尤為友好。

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

在uni-app插件市場下載符合components/組件名稱/組件名稱.vue目錄結構的組件，均可直接使用。

自定義easycom配置的示例

easycom是自動開啟的，不需要手動開啟，有需求時可以在pages.json的easycom節(jié)點進行個性化設置，如關閉自動掃描，或自定義掃描匹配組件的策略。設置參數如下：

如果你的組件，不符合easycom前述的路徑規(guī)范?？梢栽趐ages.json的easycom節(jié)點中自行定義路徑規(guī)范。

如果需要匹配node_modules內的vue文件，需要使用packageName/path/to/vue-file-$1.vue形式的匹配規(guī)則，其中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引入的優(yōu)先級低于手動引入（區(qū)分連字符形式與駝峰形式）。
• 考慮到編譯速度，直接在pages.json內修改easycom不會觸發(fā)重新編譯，需要改動頁面內容觸發(fā)。
• easycom只處理vue組件，不處理小程序專用組件（如微信的wxml格式組件）。不處理后綴為.nvue的組件。因為nvue頁面引入的組件也是.vue組件?？梢詤⒖紆ni ui，使用vue后綴，同時兼容nvue頁面。
• nvue頁面里引用.vue后綴的組件，會按照nvue方式使用原生渲染，其中不支持的css會被忽略掉。這種情況同樣支持easycom。
• vue 與 uvue 組件優(yōu)先級，詳見。

注意這里作者遇到一個問題 如果你引入的組件文件包含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 下的組件的，導致條件編譯等功能失效 ，導致組件異常 需要在根目錄創(chuàng)建 vue.config.js 文件 ，增加 @dcloudio/uni-ui 包的編譯即可正常

// 在根目錄創(chuàng)建 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 規(guī)則，讓 npm 安裝的組件支持 easycom

打開項目根目錄下的 pages.json 并添加 easycom 節(jié)點：

// pages.json
{
	"easycom": {
		"autoscan": true,
		"custom": {
			// uni-ui 規(guī)則如下配置
			"^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 解決：

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

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

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

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

最新評論