優雅管理Vue全局組件和插件

隨着項目的不斷變大，可能有些人會把插件的引入和全局組件的註冊都放到main.js中，致使後面main.js裏面一大坨引入代碼，看起來雜亂無比，也不利於後期進行維護，因此咱們儘量的讓main.js看起來整潔些。此處就用到webpack的require.context功能，實現Vue自動註冊全局組件及插件，方便全局組件和插件的管理。

全局插件管理

1. 項目中新建plugins目錄，和components目錄保持同級。
2. plugins目錄中新建index.js，以引入element-ui爲例：
3. 再plugins目錄中新建element.js，寫入官方的引用方法（暫不考慮按需引入問題）

import Vue from 'vue'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(Element, {
 size: 'small'
})
複製代碼

4. index.js中引入element.js

import './element'
複製代碼

5. main.js中引入plugins中的index.js

import Vue from 'vue'
import App from './App.vue'

// 引入插件，放在此處引用是爲了下面的router和store中可能會用到某些插件的功能。
import './plugins/index'

import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

複製代碼

這樣main.js看起來就清爽不少了，後面有新增的插件，只須要再plugins目錄下新建相應的插件名稱，而後在index.js中引入便可，再多的插件也能夠很方便的進行維護。

自動註冊全局組件

官網文檔參考：點擊前往

1. 先安裝lodash

npm install i lodash
複製代碼

2. components目錄中新建globals目錄，後面須要全局註冊的組件所有放這個裏面
3. plugins目中新建auto-regist.js（文件名可隨意），寫入如下內容

import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'

const requireComponent = require.context(
  // 其組件目錄的相對路徑
  '../components/globals',
  // 是否查詢其子目錄
  true,
  // 匹配基礎組件文件名的正則表達式
  /\w+\.vue$/
)

requireComponent.keys().forEach(fileName => {
  // 獲取組件配置
  const componentConfig = requireComponent(fileName)

  // 獲取組件的 PascalCase 命名
  const componentName = upperFirst(
    camelCase(
      // 獲取和目錄深度無關的文件名
      fileName
        .split('/')
        .pop()
        .replace(/\.\w+$/, '')
    )
  )

  // 全局註冊組件
  Vue.component(
    componentName,
    // 若是這個組件選項是經過 `export default` 導出的，
    // 那麼就會優先使用 `.default`，
    // 不然回退到使用模塊的根。
    componentConfig.default || componentConfig
  )
})
複製代碼

4. plugins中index.js引入

import './auto-regist'
import './element'
複製代碼

最後能夠components/globals中放一個測試組件進行測試。

更優雅加載插件

每次在plugins中新增了一個插件後都須要在index.js中引用，假若有100個這樣的插件，咱們就得寫100個，這裏須要的和全局組件同樣，在index.js中自動引入plugins中的插件，原理和上面的自動註冊全局組件相似。 改造下index.js的代碼：

const requirePlugin = require.context(
  // 當前plugins目錄
  '/',
  // 是否查詢其子目錄
  false,
  // 匹配當前plugins目錄下的js文件
  /.+\.js$/
)
requirePlugin.keys().forEach(fileName => {
  requirePlugin(fileName)
})


複製代碼

這樣就能自動加載引入plugins中的全部插件了。 可是這樣會存在一個插件引入順序問題，由於webpack是根據你文件夾中文件的位置排序的，若有A、B、C三個插件，A插件須要用到B插件提供的某個功能，這種狀況下因爲A插件被先引用，B後引用，致使A插件代碼報錯狀況，這裏用個取巧的方法，將A、B插件命名成如下形式：

a-2-A.js、a-1-B.js，這樣B插件就會排在前面優先加載。 若是不存在依賴關係，可隨意。

目錄結構圖

參考