如何全局注册组件

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';
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • ## Part 1, 问题: webpack + vue2.0框架中,如何在入口js中注册组件?就是在一个月以前,...
    EasonPe阅读 4,781评论 0 0
  • 区分全局和局部 全局 当你注册完之后,可以在任何组件中直接使用标签,而不需要在各个组件中引入并局部注册通常公共组件...
    lesdom阅读 17,770评论 0 6
  • 全局 当你注册完之后,可以在任何组件中直接使用标签,而不需要在各个组件中引入并局部注册 通常公共组件放在src文件...
    在下高姓阅读 4,021评论 0 0
  • 结合自已的项目,做一下记录,关于础组件的自动化全局注册的问题,在我的项目列表里,components/base-c...
    魏燕勿忘初心阅读 1,072评论 0 0
  • 今天感恩节哎,感谢一直在我身边的亲朋好友。感恩相遇!感恩不离不弃。 中午开了第一次的党会,身份的转变要...
    余生动听阅读 13,585评论 0 11