快捷導(dǎo)航

easycom模式開發(fā)UNI-APP組件調(diào)用必須掌握的實(shí)用技巧

更新時(shí)間：2021年08月27日 22:03:03 作者：mingyong.g

uni-app基于VUE開發(fā)，通常組件的使用都是先安裝，然后全局或者局部引入，注冊(cè)，今天通過本文給大家分享easycom模式開發(fā)UNI-APP組件調(diào)用必須掌握的實(shí)用技巧，需要的朋友一起看看吧

本文旨在拋磚引玉，具體文檔和easycom規(guī)范請(qǐng)移步uni-app官網(wǎng)?！緜魉烷T】easycom模式說明

easycom組件模式介紹

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

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

<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)注冊(cè)u(píng)ni-list組件。template里就可以直接用
    export default {
        data() {
            return {

            }
        }
    }
</script>

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

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

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

在這里插入圖片描述

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

自定義組件放置目錄

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

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

配置規(guī)則

官方參考自定義配置規(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的好處

簡(jiǎn)化組件的使用，提高開發(fā)效率
不論組件目錄下安裝了多少組件，easycom打包后會(huì)自動(dòng)剔除沒有使用的組件，對(duì)組件庫(kù)的使用尤為友好。

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

您可能感興趣的文章: