1.建一個文件global-components.ts盛正,把需要全局使用的組件放入views/components/global文件夾
import Vue from 'vue';
const requireComponent = require['context'](
// 其組件目錄的相對路徑
'../views/components/global',
// 是否查詢其子目錄
true,
// 匹配基礎(chǔ)組件文件名的正則表達式
/\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';