快捷導(dǎo)航

一文詳解uniapp中如何使用easycom自定義組件

更新時(shí)間：2023年05月04日 12:46:52 作者：-代號(hào)中2半-

easycom是uniapp的一種組件自動(dòng)引入的規(guī)則,使用這種規(guī)則可以使?jié)M足規(guī)則的組件無需注冊(cè)直接使用,下面這篇文章主要給大家介紹了關(guān)于uniapp中如何使用easycom自定義組件的相關(guān)資料,需要的朋友可以參考下

一、全局注冊(cè)

uni-app 支持配置全局組件，需在 main.js 里進(jìn)行全局注冊(cè)，注冊(cè)后就可在所有頁面里使用該組件。

Vue.component 的第一個(gè)參數(shù)必須是靜態(tài)的字符串。
nvue 頁面暫不支持全局組件。

二、局部注冊(cè)

局部注冊(cè)之前，在需要引用該組件的頁面，導(dǎo)入你想使用的組件。頁面引入組件方式分兩種：

第一種：傳統(tǒng)vue規(guī)范

在需要引入自定義組件的頁面中，通過 import 方式引入組件（導(dǎo)入），在 components 選項(xiàng)中注冊(cè)你想要使用的組件（引用），在頁面中使用自定義組件名稱標(biāo)簽（使用）

因?yàn)樽?cè)組件的時(shí)候定義組件名的方法有兩種，所以使用組件名時(shí)也有兩種方式，如下圖解釋：

第二種：通過uni-app的easycom規(guī)則

easycom規(guī)則*將組件引入精簡(jiǎn)為一步。只要組件安裝在項(xiàng)目的 components 目錄下，并符合 components/組件名稱/組件名稱.vue 目錄結(jié)構(gòu)。就可以不用引用、注冊(cè)，直接在頁面中使用。

什么叫符合components/組件名稱/組件名稱.vue 目錄結(jié)構(gòu)？

首先你得在項(xiàng)目跟目錄下創(chuàng)建一個(gè)components文件

組件名稱/組件名稱.vue 如 em-text文件下的em-text.vue

em-text.vue代碼就寫了個(gè)簡(jiǎn)單的view：

<template>
	<view>
		<view> My name is NO1</view>
	</view>
</template>

在index.vue中使用這個(gè)自定義的組件：

瀏覽器中運(yùn)行，便可以展示出自定義組件中的內(nèi)容：

我們已經(jīng)成功利用easycom規(guī)則來使用自定義組件，在使用的過程中需要注意以下幾點(diǎn)：

easycom是自動(dòng)開啟的，不需要手動(dòng)開啟，有需求時(shí)可以在pages.json的easycom節(jié)點(diǎn)進(jìn)行個(gè)性化設(shè)置
·easycom只處理vue組件，不處理小程序組件。暫不處理后綴為.nvue的組件

pages.json中的easycom

在這里可以更改easycom規(guī)則的符合components/組件名稱/組件名稱.vue 目錄結(jié)構(gòu)。多加一層文件后如components/文件名稱1/組件名稱/組件名稱.vue 目錄結(jié)構(gòu)，比如上面使用的自定義文件路徑改為如下：

在多出有一個(gè)文件層級(jí)的時(shí)候，在使用自定義組件則會(huì)報(bào)錯(cuò)不顯示，我們需要去pages.json中的easycom節(jié)點(diǎn)中配置路徑，如下代碼：

//easycom配置
	"easycom": {
	  "autoscan": true, // autoscan是否開啟自動(dòng)掃描，開啟后將會(huì)自動(dòng)掃描符合components/組件名稱/組件名稱.vue目錄結(jié)構(gòu)的組件
	  "custom": {
		  //表示components/em路徑下，所有的em-開頭文件下，所有的em-開頭的vue文件
		  "em-(.*)": "@/components/em/em-$1/em-$1.vue" 
	  }
	},

點(diǎn)擊保存pages.json文件后，要關(guān)掉瀏覽器or小程序，重新運(yùn)行代碼，否則還是會(huì)報(bào)錯(cuò)不顯示。

插件市場(chǎng)

uni-app 搭建了組件的插件市場(chǎng)，有很多現(xiàn)成的組件，善于利用easycom 規(guī)則在uni-app插件市場(chǎng)使用現(xiàn)成組件，若下載符合components/組件名稱/組件名稱.vue目錄結(jié)構(gòu)的組件，均可直接使用插件市場(chǎng)

擴(kuò)展組件（uni-ui）

uni-ui是DCloud提供的一個(gè)跨端ui庫，它是基于vue組件的、flex布局的、無dom的跨全端ui框架。uni-ui不包括基礎(chǔ)組件，它是基礎(chǔ)組件的補(bǔ)充。

uni-ui遵循easycom、uni_module、datacom，所以只需要安裝導(dǎo)入后，可以直接使用，不需要組件的安裝引用

方法一：在HBuilderX 新建uni-app項(xiàng)目的模板中，選擇uni-ui模板