朱丽叶

导航

vue中webpack环境中动态注册插件

// webpack 动态引入文件

const requireComonents = require.context("./", true, /\.vue$/);

// Vue提供的install 方法进行插件的注册
/**
install方法第一个参数是vue的构造器,第二个参数是可选的选项对象
	install(Vue,option){
		组件
		指令
		混入
		挂载vue原型
	}
*/
const install: any = (Vue: any) => {
  // 判断当前组件是否已经注册过这个组件 注册过直接return
  if (install.isInstall) return;
  install.isInstall;

  // 符合查询的文件路径数组
  requireComonents.keys().forEach((fileName) => {
    console.log(fileName);

    // 获取读取到的Vue组件的实例对象
    const vueComponent = requireComonents(fileName);
    console.log(vueComponent);
    
    // 获取当前组件的名称
    const vueComponentName = vueComponent.default.name;

    // 注册组件
    Vue.component(vueComponentName, vueComponent.default || vueComponent);
  });
};

export default {
  install,
};

posted on 2022-12-21 23:35  朱丽叶  阅读(120)  评论(0)    收藏  举报