本文旨在拋磚引玉，具體文檔和easycom規(guī)范請移步uni-app官網(wǎng)。【傳送門】easycom模式說明

easycom組件模式介紹

• 自HBuilderX 2.5.5起支持easycom組件模式。若HBuiderX版本較低，請先檢查更新！
  

uni-app基于VUE開發(fā)，通常組件的使用都是先安裝，然后全局或者局部引入，注冊。然后方可在頁面中使用相應(yīng)的組件。過程較為繁瑣，而uni-app使用easycom組件模式對上述三個步驟進(jìn)行了簡化，使得用戶在使用組件的時候無需引用和注冊直接可在頁面中使用組件。當(dāng)然前提是需要遵循一定的easycom規(guī)范
實際使用效果如下：

<template>
    <view class="container">
        <uni-list>
            <uni-list-item title="第一行"></uni-list-item>
            <uni-list-item title="第二行"></uni-list-item>
        </uni-list>
    </view>
</template>
<script>
    // 這里不用import引入，也不需要在components內(nèi)注冊uni-list組件。template里就可以直接用
    export default {
        data() {
            return {

            }
        }
    }
</script>

uni-app 默認(rèn)的easycom規(guī)范

若要向上述代碼塊一樣直接在頁面中使用組件需要在安裝組件或者自定義組件時遵循如下規(guī)范：

• 組件文件必須放在components目錄下。
• 組件所對應(yīng)的.vue文件必須放在組件同名的文件目錄下。
• 文字描述可能不是很清楚，直接看效果圖：
  

以圖中uni-swipe-action.vue組件為例，其組件路徑必須是components/uni-swipe-action/uni-swipe-action.vue

自定義組件放置目錄

• uni-app默認(rèn)的easycom 規(guī)范是將組件放置在componnents目錄下
• 同時uni-app也允許我們修改組件放置的默認(rèn)目錄和匹配規(guī)則；
  

easycom是自動開啟的，不需要手動開啟，有需求時可以在pages.json的easycom例程進(jìn)行個性化設(shè)置，如關(guān)閉自動掃描，或自定義掃描匹配組件的策略。設(shè)置參數(shù)如下：

官方參考自定義配置規(guī)則如下：
【匹配node_modules內(nèi)部的vue文件】

"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文件
  }
}

uVIew配置規(guī)則如下：
【匹配uview/components目錄下的以u-開頭的uview組件】

{
	// 此為需要加入的內(nèi)容
	"easycom": {
		"^u-(.*)": "@/uview/components/u-$1/u-$1.vue"
	},
	
	// 此為本身已有的內(nèi)容
	"pages": [
		// ......
	]
}

使用easycom的好處

1. 簡化組件的使用，提高開發(fā)效率
2. 不論組件目錄下安裝了多少組件，easycom打包后會自動剔除沒有使用的組件，對組件庫的使用尤為友好。

到此這篇關(guān)于easycom模式開發(fā)UNI-APP組件調(diào)用必須掌握的實用技巧的文章就介紹到這了,更多相關(guān)easycom模式UNI-APP組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論