我們寫了一堆基礎UI元件，然後每次我們需要使用這些元件的時候，都得先import，然後宣告components，很繁瑣！秉持能偷懶就偷懶的原則，我們要想辦法優化！

招式解析：

我們需要藉助一下神器webpack，使用 require.context() 方法來建立自己的（模組）上下文，從而實現自動動態require元件。這個方法需要3個引數：要搜尋的資料夾目錄，是否還應該搜尋它的子目錄，以及一個匹配檔案的正則表示式。

我們在components資料夾新增一個叫global.js的檔案，在這個檔案裡藉助webpack動態將需要的基礎元件統統打包進來。

import Vue from 'vue'

 

function capitalizeFirstLetter(string) {

  return string.charAt(0).toUpperCase() + string.slice(1)

}

 

const requireComponent = require.context(

  '.', false, /\.vue$/

   //找到components資料夾下以.vue命名的檔案

)

 

requireComponent.keys().forEach(fileName => {

  const componentConfig = requireComponent(fileName)

 

  const componentName = capitalizeFirstLetter(

    fileName.replace(/^\.\//, '').replace(/\.\w+$/, '')

    //因為得到的filename格式是: './baseButton.vue', 所以這裡我們去掉頭和尾，只保留真正的檔名

  )

 

  Vue.component(componentName, componentConfig.default || componentConfig)

})

 

 最後我們在main.js中import 'components/global.js'，然後我們就可以隨時隨地使用這些基礎元件，無需手動引入了。