欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2023年05月04日 12:46:52   作者:-代號中2半-  
easycom是uniapp的一種組件自動引入的規(guī)則,使用這種規(guī)則可以使?jié)M足規(guī)則的組件無需注冊直接使用,下面這篇文章主要給大家介紹了關于uniapp中如何使用easycom自定義組件的相關資料,需要的朋友可以參考下

一、全局注冊

uni-app 支持配置全局組件,需在 main.js 里進行全局注冊,注冊后就可在所有頁面里使用該組件。

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

二、局部注冊

局部注冊之前,在需要引用該組件的頁面,導入你想使用的組件。頁面引入組件方式分兩種:

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

在需要引入自定義組件的 頁面中,通過 import 方式引入組件 (導入),在 components 選項中注冊你想要使用的組件(引用),在頁面中使用自定義組件名稱標簽(使用)

因為注冊組件的時候定義組件名的方法有兩種,所以使用組件名時也有兩種方式,如下圖解釋:

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

easycom規(guī)則*將組件引入精簡為一步。只要組件安裝在項目的 components 目錄下,并符合 components/組件名稱/組件名稱.vue 目錄結構。就可以不用引用、注冊,直接在頁面中使用。

什么叫符合components/組件名稱/組件名稱.vue 目錄結構?

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

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

em-text.vue代碼就寫了個簡單的view:

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

在index.vue中使用這個自定義的組件:

瀏覽器中運行,便可以展示出自定義組件中的內容:

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

  • easycom是自動開啟的,不需要手動開啟,有需求時可以在pages.json的easycom節(jié)點進行個性化設置
  • ·easycom只處理vue組件,不處理小程序組件。暫不處理后綴為.nvue的組件

pages.json中的easycom

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

在多出有一個文件層級的時候,在使用自定義組件則會報錯不顯示,我們需要去pages.json中的easycom節(jié)點中配置路徑,如下代碼:

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

點擊保存pages.json文件后,要關掉瀏覽器or小程序,重新運行代碼,否則還是會報錯不顯示。

插件市場

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

擴展組件(uni-ui)

uni-ui是DCloud提供的一個跨端ui庫,它是基于vue組件的、flex布局的、無dom的跨全端ui框架。uni-ui不包括基礎組件,它是基礎組件的補充。

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

方法一:在HBuilderX 新建uni-app項目的模板中,選擇uni-ui模板

里面內置了uni-ui,直接使用

方法二:通過 uni_modules 安裝組件

你可以選擇單獨安裝某個組件,如 數(shù)字角標 評分 ,或者直接下載整個uni-ui組件庫,點擊使用HBuilderX導入插件

導入成功后顯示如下,會多出一個uni_modules文件,里面是uni-ui的組件具體配置

使用某個組件和顯示:

第三種方法:通過npm安裝

在 vue-cli 項目中可以使用 npm 安裝 uni-ui 庫 ,或者直接在 HBuilderX 項目中使用 npm 。

vue-cli項目或者HBuilderX 項目都需要配置好vue.config.js文件,具體移步官網(wǎng)uni-ui的使用

總結

到此這篇關于uniapp中如何使用easycom自定義組件的文章就介紹到這了,更多相關uniapp使用easycom自定義組件內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!

相關文章

最新評論