Vue一次性簡潔明瞭引入全部公共組件

使用場景

-在開發過程當中,每每會有不少本身定義公用組件,咱們經過import 導入,components掛載到實例上就行,項目剛開始還好,可是隨着項目迭代,組件愈來愈多,同一個組件不一樣的方式用須要重複導入掛載,就顯得冗餘
這裏是經過require.context的一種便捷操做

實例

文件結構

component/modal裏存放的是咱們定義的公共DOM組件

// 導入Vue, 須要使用Vue.component()方法註冊組件
import Vue from 'vue'

// let f = r => {
//   return r.keys().map(key => r(key));
// }
//
// console.log(f(require.context('./modal', true, /\.vue/)));

// 將 ./modal 下的全部組件所有讀取出來
//
//
// requireComponents: ƒ webpackContext(req) {
//     return __webpack_require__(webpackContextResolve(req));
// }

/**
 * @var requireComponents -- requireComponents保存每一個文件的相對路徑的集合,可經過keys()返回
 * @function requireComponents -- 也是個方法,傳入keys()枚舉出來的路徑可返回組件實例
 */

const requireComponents = require.context('./', true, /\.vue/);
// 打印結果
// requireComponents: ƒ webpackContext(req) {
//     return __webpack_require__(webpackContextResolve(req));
// }
//

// 遍歷出每一個組件的路徑
requireComponents.keys().forEach(fileName => {
  // 組件實例
  const reqCom = requireComponents(fileName)
  // 截取路徑做爲組件名
  const reqComName = fileName.split('/')[1]
  // 組件掛載
  Vue.component(reqComName, reqCom.default || reqCom)
})

具體的只要打印出來就一目瞭然,這裏不作贅述