[Vue]强迫症发作,我是如何注册全局组件的?

2,826 阅读1分钟

前言

  • 这两天看了一篇关于搭建vue模板的~很nice的文章,有很多自动化的操作,心想跟着大佬实践一波
  • 不料在玩耍全局组件的时候,诱发了强迫症,具体经过如下:

1. 常规操作

定义全局组件通常会在src目录下创建一个components文件夹;然后在components目录下创建index.js文件用于全局注册;创建global文件夹用于存放全局组件

在全局组件中通常也会创建一个main.vue文件用于定义组件,创建一个index.js用于引入组件和对外暴露组件。如图:

全局注册代码如下:

import Vue from 'vue'

// 扫描global 目录下.js结尾的文件,并扫描子文件夹
const componentsContext = require.context('./global', true, /\.js$/)

// 枚举componentsContext对象
componentsContext.keys().forEach(component => {
  const componentConfig = componentsContext(component)

  // 兼容 import export 和 require module.export 两种规范
  const ctrl = componentConfig.default || componentConfig
  Vue.component(ctrl.name, ctrl.main)
})

2. 优化操作

当时觉得每次都需要创建一个index.js文件,并且里面只有两行代码,于是就想能不能把index.js文件去掉。目录变成这样:

全局注册代码如下:

import Vue from 'vue'

// 扫描当前目录下.vue结尾的文件,并扫描子文件夹
const componentsContext = require.context('./', true, /\.vue$/)

// 枚举componentsContext对象组
componentsContext.keys().forEach(component => {
  const componentConfig = componentsContext(component)

  // 文件名作组件名
  // component --> ./HeaderBar/main.vue
  let name = component.replace('./', '').replace('/main.vue', '')
  
  // 兼容 import export 和 require module.export 两种规范
  const ctrl = componentConfig.default || componentConfig
  Vue.component(name, ctrl)
})

后记

希望文章对大家有启发,感谢点个赞吧~

另外,送一波福利,公司校招启动,2020界的同学可以点进来获取内推,早就是优势!