vue3.0公共組件自動(dòng)導(dǎo)入的方法實(shí)例
更新時(shí)間：2021年04月09日 10:03:59 作者：放風(fēng)嘍
這篇文章主要給大家介紹了關(guān)于vue3.0公共組件自動(dòng)導(dǎo)入的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
一、前提
我們使用的是require.context方法導(dǎo)入，在vite創(chuàng)建的項(xiàng)目內(nèi)使用會(huì)報(bào)錯(cuò)"require not found"，所以必須用webpack創(chuàng)建項(xiàng)目。或者有大能可以說說vite怎么解決這個(gè)問題。
二、規(guī)則
我使用的注冊規(guī)則是，搜索src/components/路徑下的所有目錄和子目錄，搜索文件名叫做"index.vue"的文件，使用上級目錄的名字作為組件名，進(jìn)行注冊。結(jié)構(gòu)如下：
只注冊index.vue，其他名字的組件不注冊，
三、注冊
由于vue3.0沒有import “Vue” from vue，我們需要使用app來注冊，所以只能在 main.js
入口文件注冊
// src/main.js
import { createApp } from 'vue'
const app = createApp(App)
// 動(dòng)態(tài)注冊公共組件
const requireComponent = require.context(
// 其組件目錄的相對路徑
'@/components',
// 是否查詢其子目錄
true,
// 匹配基礎(chǔ)組件文件名的正則表達(dá)式
/index.vue$/
)
const jieguo = requireComponent.keys().filter((item:any)=> true)
jieguo.forEach((item:any)=>{
const componentConfig = requireComponent(item)
const name = item.split("/")[1]
app.component(name,componentConfig.default || componentConfig)
})
// 注冊結(jié)束
app.mount('#app')
當(dāng)我們新建、刪除、給公共組件改名等操作，注冊方面就不需要任何操作了。重啟一下項(xiàng)目，喝口水的時(shí)間就行了 。
總結(jié)
到此這篇關(guān)于vue3.0公共組件自動(dòng)導(dǎo)入的文章就介紹到這了,更多相關(guān)vue3.0公共組件導(dǎo)入內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了詳解vue或uni-app的跨域問題解決方案，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
vue3獲取ref實(shí)例結(jié)合ts的InstanceType問題
這篇文章主要介紹了vue3獲取ref實(shí)例結(jié)合ts的InstanceType問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
本篇文章主要介紹了基于vue的換膚功能的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10
使用Vue做一個(gè)簡單的todo應(yīng)用的三種方式的示例代碼
這篇文章主要介紹了使用Vue做一個(gè)簡單的todo應(yīng)用的三種方式的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-10-10
這篇文章主要介紹了淺談vue中$bus的使用和涉及到的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要為大家詳細(xì)介紹了一個(gè)例子，幫助大輕松學(xué)會(huì)Vue.js，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
Vue項(xiàng)目中添加鎖屏功能實(shí)現(xiàn)思路
這篇文章主要介紹了Vue項(xiàng)目中添加鎖屏功能的實(shí)現(xiàn)思路，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-06-06
electron踩坑之remote of undefined的解決
這篇文章主要介紹了electron踩坑之remote of undefined的解決，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
你知道Vue中神奇的$set是如何實(shí)現(xiàn)的嗎?
在日常開發(fā)中，$set的也是一個(gè)非常實(shí)用的API。但是我們知其然更要知其所以然，接下來就跟隨小編一起看一下Vue中的$set是如何實(shí)現(xiàn)的吧2022-12-12
這篇文章主要為大家介紹了Vue之Axios異步通信，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11