vue2 全局注册组件

208 阅读1分钟
import Vue from "vue";
const requireComponent = require.context(
  "./", //组件目录的相对路径
  true, //是否查询其子目录
  /\.vue$/ //匹配基础组件文件名的正则表达式
);
requireComponent.keys().forEach((fileName) => {
  const componentConfig = requireComponent(fileName); //获取组件配置
  Vue.component(
    componentConfig.default.name, //此处的name,是组件中定义的name属性
    componentConfig.default //如果这个组件选是通过 `export default` 导出的,那么会优先使用 `.default`,否则回退到使用模块的根
  );
});

在components文件下 新建index.js 把代码贴进去 在main.js引入import"@/commponents/index"

image.png

如果你使用了自动注册组件,请确保每个组件的 name 属性和你页面上使用的组件名称保持一致

image.png

使用的时候不需要在页面 import xxx from "xxxxx" 直接在当前页面使用

image.png