如何全局注册组件

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';

你可能感兴趣的:(如何全局注册组件)