vue项目中 自动加载注册组件

Posted 2021-09-01 奥特曼　

使用场景：在开发项目中 经常会注册一些全局公共组件，当项目全部开发完了就会出现下面的这种现象 

 每次都要引入注册非常的麻烦  所以

 webpack 提供 自动引入注册组件

https://webpack.js.org/guides/dependency-management/#require-context

// webpack提供
// context(目录路径，是否加载子目录，加载文件的匹配正则)
const importFn = require.context('./', false, /\\.vue$/)
console.log(importFn.keys())

export default {
  install (app) {
    // 根据keys批量注册
    importFn.keys().forEach(path => {
      // 导入组件
      const component = importFn(path).default
      // 进行注册
      app.component(component.name, component)
    })
  }
}

通过组件的形式注册  记得在main.js中use

解释代码：

context(目录路径，是否加载子目录，加载文件的匹配正则)

const importFn = require.context('./', false, /\\.vue$/)

console.log(importFn.keys()) // 匹配的路径