首页 > 其他分享 >vue中webpack环境中动态注册插件

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

时间:2022-12-21 23:44:38浏览次数:39  
标签:插件 vue const vueComponent webpack Vue install 组件

// 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,
};

标签:插件,vue,const,vueComponent,webpack,Vue,install,组件
From: https://www.cnblogs.com/rzl795/p/16997462.html

相关文章

  • [vue项目] 后台管理 11111111111111111
    文章目录​​gitee地址​​​​登录业务解析​​​​退出登录​​​​模板结构图​​​​路由的搭建​​​​品牌管理​​​​table数据渲染​​​​分页器​​​​点击添加......
  • [vue] DataV 组件
    http://datav.jiaminghi.com/guide/......
  • Vue3.0 生命周期
    所有生命周期钩子的this上下文都是绑定至实例的。beforeCreate:在实例初始化之后、进行数据帧听和事件/侦听器的配置之前同步调用。created:实例创建完成,主要包括数据帧听......
  • vue-router3,点击相同的路由,会报错NavigationDuplicated
    vue-router点击相同的路由链接会报错NavigationDuplicated{"_name":"NavigationDuplicated","name":"NavigationDuplicated","message":"Navigatingto......
  • Vite插件快速识别-性能篇
    Vite快速识别之性能篇1、分包策略:浏览器重复请求相同名称的静态资源时,会直接使用缓存的资源。利用这个机制将不会经常更新的代码单独打包,减少HTTP请求降低服务器压力。......
  • Vite插件快速识别-开发篇
    Vite插件快速识别-日常开发篇1、打包构建后移除console.log和注释:vite官方自带//vite.config.tsimport{defineConfig}from'vite'exportdefaultdefineConfig({......
  • Vite + Vue3导入 vue-i18n 插件
    使用Vite+Vue3导入vue-i18n插件Step1下载vue-i18n插件npminstallvue-i18nStep2新建local文件夹,创建index.jsindex.jsimport{createI18n}from"v......
  • KingbaseES V8R6 sslinfo 插件
    前言KingbaseES对使用SSL连接加密客户端/服务器通讯的本地支持,可以增加数据传输安全性。本文展示配置ssl连接,并通过安装一个插件验证ssl加密认证使用。一、配置ssl连接......
  • Argocd/Argocd Rolloouts/Argocd-cli/kubectl argo rollouts插件部署
    argocd部署官网​​https://argo-cd.readthedocs.io/en/stable/getting_started/​​部署地址参考​​https://argo-cd.readthedocs.io/en/stable/getting_started/​​​​......
  • Vue-router4.0接口快速识别
    Vue-router4.0接口快速识别<router-link> :将会被渲染a标签属性名属性类型属性作用tostring/object相当于跳转调用router.push(string/object)replacebo......