前言
- 这两天看了一篇关于搭建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界的同学可以点进来获取内推,早就是优势!