vue3.0公共組件自動導入的方法實例

Posted on by

一、前提

我們使用的是require.context方法導入，在vite創建的項目內使用會報錯”require not found”，所以必須用webpack創建項目。或者有大能可以說說vite怎麼解決這個問題。

二、規則

我使用的註冊規則是，搜索src/components/路徑下的所有目錄和子目錄，搜索文件名叫做”index.vue”的文件，使用上級目錄的名字作為組件名，進行註冊。結構如下：

隻註冊index.vue，其他名字的組件不註冊，

三、註冊

由於vue3.0沒有import “Vue” from vue，我們需要使用app來註冊，所以隻能在 main.js

入口文件註冊

// src/main.js

import { createApp } from 'vue'
const app = createApp(App)
// 動態註冊公共組件
const requireComponent = require.context(
    // 其組件目錄的相對路徑
    '@/components',
    // 是否查詢其子目錄
    true,
    // 匹配基礎組件文件名的正則表達式
    /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)
})
// 註冊結束

app.mount('#app')

當我們新建、刪除、給公共組件改名等操作，註冊方面就不需要任何操作瞭。重啟一下項目，喝口水的時間就行瞭 。

總結

到此這篇關於vue3.0公共組件自動導入的文章就介紹到這瞭,更多相關vue3.0公共組件導入內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：

    None Found