一文詳解uniapp中如何使用easycom自定義組件
一、全局注冊(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模板
里面內(nèi)置了uni-ui,直接使用
方法二:通過 uni_modules 安裝組件
你可以選擇單獨(dú)安裝某個(gè)組件,如 數(shù)字角標(biāo) 評(píng)分 ,或者直接下載整個(gè)uni-ui組件庫,點(diǎn)擊使用HBuilderX導(dǎo)入插件
導(dǎo)入成功后顯示如下,會(huì)多出一個(gè)uni_modules文件,里面是uni-ui的組件具體配置
使用某個(gè)組件和顯示:
第三種方法:通過npm安裝
在 vue-cli 項(xiàng)目中可以使用 npm 安裝 uni-ui 庫 ,或者直接在 HBuilderX 項(xiàng)目中使用 npm 。
vue-cli項(xiàng)目或者HBuilderX 項(xiàng)目都需要配置好vue.config.js文件,具體移步官網(wǎng)uni-ui的使用
總結(jié)
到此這篇關(guān)于uniapp中如何使用easycom自定義組件的文章就介紹到這了,更多相關(guān)uniapp使用easycom自定義組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
使用微信小程序API,調(diào)用微信的各種內(nèi)置能力。
微信小程序如何使用小程序API,去調(diào)用微信提供的各種內(nèi)置能力(即微信API)。小程序開發(fā)框架提供豐富的微信原生API,可以方便的調(diào)起微信提供的能力,如獲取用戶信息,本地存儲(chǔ),支付功能等。2022-12-12設(shè)置checkbox為只讀(readOnly)的兩種方式
設(shè)置checkbox為只讀的方法有很多,在本文為大家詳細(xì)介紹下兩種比較實(shí)用的方法,感興趣的朋友不要錯(cuò)過2013-10-10javascript設(shè)計(jì)模式 – 迭代器模式原理與用法實(shí)例分析
這篇文章主要介紹了javascript設(shè)計(jì)模式 – 迭代器模式原理與用法,結(jié)合實(shí)例形式分析了javascript迭代器模式相關(guān)概念、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-04-04js讀寫COOKIE實(shí)現(xiàn)記住帳號(hào)或密碼的代碼(js讀寫COOKIE)
js實(shí)現(xiàn)記住帳號(hào)或密碼(js讀寫COOKIE) 的實(shí)現(xiàn)代碼,原理就是利用cookies保存于讀取功能。2010-05-05JS中IP地址與整數(shù)相互轉(zhuǎn)換的實(shí)現(xiàn)代碼
這篇文章主要介紹了JS中IP地址與整數(shù)相互轉(zhuǎn)換的實(shí)現(xiàn)代碼,需要的朋友可以參考下2017-04-04JS清除字符串中重復(fù)值的實(shí)現(xiàn)方法
這篇文章主要介紹了JS清除字符串中重復(fù)值的實(shí)現(xiàn)方法,涉及javascript數(shù)組與字符串的遍歷、比較及數(shù)學(xué)運(yùn)算相關(guān)技巧,需要的朋友可以參考下2016-08-08