1.建一个文件global-components.ts,把需要全局使用的组件放入views/components/global文件夹
import Vue from 'vue';
const requireComponent = require['context'](
// 其组件目录的相对路径
'../views/components/global',
// 是否查询其子目录
true,
// 匹配基础组件文件名的正则表达式
/\w+\.vue$/
// /[A-Z]\w+\.vue$/
);
requireComponent.keys().forEach(fileName => {
// 获取组件配置
const componentConfig = requireComponent(fileName);
// 获取组件的 PascalCase 命名
const componentName =
fileName
.replace(/^\.\/(.*)\.\w+$/, '$1')
.split('/')
.pop() || '';
// 全局注册组件
Vue.component(componentName, componentConfig.default);
});
2.在main.ts引入使用
// 组件注册
import '@/common/global-components';
网友评论