vue3.0公共組件自動導(dǎo)入的方法實例
更新時間：2021年04月09日 10:03:59 作者：放風(fēng)嘍
這篇文章主要給大家介紹了關(guān)于vue3.0公共組件自動導(dǎo)入的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
一、前提
我們使用的是require.context方法導(dǎo)入，在vite創(chuàng)建的項目內(nèi)使用會報錯"require not found"，所以必須用webpack創(chuàng)建項目?；蛘哂写竽芸梢哉f說vite怎么解決這個問題。
二、規(guī)則
我使用的注冊規(guī)則是，搜索src/components/路徑下的所有目錄和子目錄，搜索文件名叫做"index.vue"的文件，使用上級目錄的名字作為組件名，進行注冊。結(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)
// 動態(tài)注冊公共組件
const requireComponent = require.context(
// 其組件目錄的相對路徑
'@/components',
// 是否查詢其子目錄
true,
// 匹配基礎(chǔ)組件文件名的正則表達式
/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')
當我們新建、刪除、給公共組件改名等操作，注冊方面就不需要任何操作了。重啟一下項目，喝口水的時間就行了 。
總結(jié)
到此這篇關(guān)于vue3.0公共組件自動導(dǎo)入的文章就介紹到這了,更多相關(guān)vue3.0公共組件導(dǎo)入內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue基于mint-ui的城市選擇3級聯(lián)動的示例
本篇文章主要介紹了vue基于mint-ui的城市選擇3級聯(lián)動的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要介紹了Vue-CLI 項目在pycharm中配置方法，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08
這篇文章主要介紹了vue實現(xiàn)子路由調(diào)用父路由的方法,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
單頁面應(yīng)用的一個問題就是首頁加載東西過多，加載時間過長。特別在移動端，單頁面應(yīng)用的首屏加載優(yōu)化更是繞不開的話題，這篇文章主要介紹了vue項目首屏加載時間優(yōu)化實戰(zhàn)，感興趣的小伙伴們可以參考一下2019-04-04
詳解vue開發(fā)中調(diào)用微信jssdk的問題
這篇文章主要介紹了vue開發(fā)中調(diào)用微信jssdk的問題，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要為大家介紹了Vue之props 配置，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助,希望能夠給你帶來幫助2021-11-11
這篇文章主要為大家介紹了Vue3源碼系列通過render及patch了解diff原理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
這篇文章主要介紹了詳解解決Vue相同路由參數(shù)不同不會刷新的問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
淺談vue的iview列表table render函數(shù)設(shè)置DOM屬性值的方法
下面小編就為大家?guī)硪黄獪\談vue的iview列表table render函數(shù)設(shè)置DOM屬性值的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要給大家介紹了關(guān)于Vue 2.0在ie 11中打開項目頁面空白問題的解決方法，文中詳細分析出現(xiàn)該問題的原因，并給出了詳細的解決方法，需要的朋友可以參考借鑒，下面跟著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-07-07