第一步

在conponents文件夹的index.js

为了保持代码整洁 main.js里最好不要写逻辑代码,所以将其放在components里面暴露

index.js

/* 批量注册组件
require.context('文件路径',深层次查找[bool],匹配的文件后缀)=====webpack提供的
*/
export default {
  install(Vue) {
    /* 函数 */
    var requireComponent = require.context("./", true, /\.vue$/);
    requireComponent.keys().forEach((item) => {
      var moduleDefault = requireComponent(item).default;
      Vue.component(moduleDefault.name, moduleDefault)
  },
};

第二步

在main.js导入注册即可

main.js

// /* 全局注册组件 */
import pluginCom from "@/components";
Vue.use(pluginCom);

*使用此方法注意点

所有的全局组件都必须设置name属性,否则会报错,因为第一步中使用了每个组件中的name属性