在vue项目中会遇到总是需要对组件进行引来引去的调用。项目大了的话需要写的太多。那么有没有简便的方法,就类似组件库一样,一次引入全局使用,那么它来了
项目结构
main.js
const requireComponent = require.context(
// 其组件目录的相对路径
'@/components/',
// 是否查询其子目录
true,
// 匹配基础组件文件名的正则表达式
/\.(vue|js)$/
);
requireComponent.keys().forEach(fileName => {
// 获取组件配置
const componentConfig = requireComponent(fileName);
// 获取组件的命名
const componentName = fileName.replace(/^\.\//, '').replace(/\/\index.vue$/, ''); // eslint-disable-line
// 全局注册组件
Vue.component(
componentName,
// 如果这个组件选项是通过 `export default` 导出的,
// 那么就会优先使用 `.default`,否则回退到使用模块的根。
componentConfig.default || componentConfig
);
});