vue 基礎元件的自動化全域性註冊

參考官網： 下的：基礎元件的自動化全域性註冊

在日常開發中，有一些元件是比較常用，但是為了避免在開發過程中不停地引入，或者在main.js中註冊，，或者每新增乙個元件就需要手動註冊一次。則直接進行自動化全域性註冊。

自動化全域性註冊，官網上都詳細的說明，以下是自己官網的說明基礎上進行了乙個demo開發例項：

1、自定義資料夾：

在src下新建乙個components資料夾，用於存放元件。並新建乙個用於存放需要自動化全域性註冊的元件，例如base。

2、在base資料夾下定義index.js，具體**如下示：

// 基礎元件的自動化全域性註冊

import vue from 'vue'
const requirecomponent = require.context(
// 其元件目錄的相對路徑
'./',
// 是否查詢其子目錄
true,
// 匹配基礎元件檔名的正規表示式
/\.vue$/
) requirecomponent.keys().foreach(filename => )

1、匹配基礎元件檔名的正規表示式，此處需要根據實際的元件名稱和規則進行配置；

2、componentconfig.default.name此處用到的，是表示元件的名稱，並不是固定的寫法。可以用不同的寫法來表示元件名稱，例如可以直接解析filename得出資料夾的名稱作為元件名稱也是可以的。componentconfig.default.name中的name，來自於元件定義的時候頁面的name。若頁面沒有定義name，則報錯。

3、在main.js中引入index.js檔案

由於全域性註冊的行為必須在根 vue 例項 (通過new vue) 建立之前發生。

// 基礎元件的自動化全域性註冊。全域性註冊的行為必須在根 vue 例項 (通過 new vue) 建立之前發生

4、直接在需要的地方使用該元件即可
頁面效果如下示：
Vue基礎元件自動化全域性註冊
vue中有很多基礎的元件可以自動化註冊使用 在src components下面建立 basecomponents basevue.vue the vue build version to load with the import command runtime only or standalone ...
基礎元件的自動化全域性註冊
require.context是webpack的api，主要用來實現自動化匯入模組，在前端工程中，如果遇到從乙個資料夾引入很多模組的情況,可以使用這個api,它會遍歷資料夾中的指定檔案,然後自動匯入,使得不需要每次顯式的呼叫import匯入模組 例如在main.js中全域性註冊多個元件 基礎元件的自...
元件的自動化全域性註冊
官方位址 在使用vue構建專案的過程中，我們會設定一些通用的元件，他可能只包含了乙個按鈕或者其他的乙個小功能，但是會被我們在不同的元件頁面頻繁呼叫。此時若是每乙個元件頁面都進行引用，將會有很多重複冗雜的 可以改為全域性註冊。具體如下 將這些通用基礎元件放置在同乙個資料夾下 如 components ...