本文旨在拋磚引玉，具體文件和easycom規範請移步uni-app官網。【傳送門】easycom模式說明

easycom元件模式介紹

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

uni-app基於開發，通常元件的使用都是先安裝，然後全域性或者區域性引入，註冊。然後方可在頁面中使用相應的元件。過程較為繁瑣，而uni-app使用easycom元件模式對上述三個步驟進行了簡化，使得使用者在使用元件的時候無需引用和註冊直接可在頁面中使用元件。當然前提是需要遵循一定的easycom規範
實際使用效果如下：

<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內註冊uni-list元件。template裡就可以直接用
    export default {
        data() {
            return {

            }
        }
    }
</script>

uni-app 預設的easycom規範

若要向上述程式碼塊一樣直接在頁面中使用元件需要在安裝元件或者自定義元件時遵循如下規範：

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

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

自定義元件放置目錄

• uni-app預設的easycom 規範是將元件放置在componnents目錄下
• 同時uni-app也允許我們修改元件放vKnoR置的預設目錄和匹配規則；
  

easycom是自動開啟的，不需要手動開啟，有需求時可以在pages.on的easycom例程進行個性化設定，如關閉自動掃描，或自定義掃描匹配元件的策略。設定引數如下：

官方參考自定義配置規則如下：
【匹配node_modules內部的vue檔案】

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

uVIew配置規則如下：
【匹配uview/components目錄下的以u-開頭的uview元件】

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

使用easycom的好處

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

到此這篇關於easycom模式開發UNI-APP元件呼叫必須掌握的實用技巧的文章就介紹到這了,更多相關easycom模式UNI-APP元件內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！