vue自动化全局注册组件

自动化注册的方法在vue官方文档有写,这里做下笔记,加深印象。

实际项目中,可能会出现组件越来越多的情况,而每添加一个新的组件,就需要在main.js中,引入并注册一次,过程会非常繁琐。

官方文档是怎么做的?

  1. 利用webpack获取目录下的文件
1
2
3
4
5
6
7
8
const files = require.context(
//要自动化注册组件的文件夹的路径
'./components',
//是否查找子文件夹
false,
//用于匹配查找文件名的正则表达式
/\.(vue|js)$/
)
  1. 遍历获取到的文件,对其进行批量操作
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    files.keys().forEach(fileName => {
    // 获取组件配置
    const componentConfig = files(fileName)

    // 取得组件名
    const componentName =
    // 将文件名前面的 `'./` 和扩展名剥离
    fileName.replace(/^\.\/(.*)\.\w+$/, '$1')

    // 以全局方式注册组件
    Vue.component(
    componentName,
    // 如果组件是通过 `export default` 导出,
    // 则在 `.default` 中,查找组件选项,
    // 否则回退至模块根对象中,查找组件选项
    componentConfig.default || componentConfig
    )
    })

require.context了解一下

webpack会在构建的时候解析代码中的require.context(),该方法会导出一个require函数,这个函数有三个属性:

  • resolve 是一个函数,返回模块的id;
  • keys 是一个函数,返回一个数组,包含所有被处理到的模块;
  • id 是上下文模块里面所包含的模块 id。
    在注册组件中,只用keys()拿到组件模块遍历注册就可以了。
坚持原创技术分享,您的支持将鼓励我继续创作!