vue 基礎組件的自動化全局注冊

參考官網：https://cn.vuejs.org/v2/guide/components-registration.html 下的：基礎組件的自動化全局注冊

在日常開發中，有一些組件是比較常用，但是為了避免在開發過程中不停地引入，或者在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 => {
    // 獲取組件配置
    const componentConfig = requireComponent(fileName)
    // 全局注冊組件
    Vue.component(
        componentConfig.default.name,   // 此處的name,是組件屬性定義的name
        // 如果這個組件選項是通過 `export default` 導出的，
        // 那么就會優先使用 `.default`，
        // 否則回退到使用模塊的根。
        componentConfig.default
    )
  })

　　以上代碼需要解釋的地方：

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

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

　　

 

 

3、在main.js中引入index.js文件

由於全局注冊的行為必須在根 Vue 實例 (通過 new Vue) 創建之前發生。

// 基礎組件的自動化全局注冊。全局注冊的行為必須在根 Vue 實例 (通過 new Vue) 創建之前發生
import './components/base/index'

 

 

 

4、直接在需要的地方使用該組件即可

頁面效果如下示：