vue3 require.context 实现基础组件的自动化全局注册模块自动化加载（霸霸看了都说好）

在日常开发中，有一些组件是比较常用，但是为了避免在开发过程中不停地引入，或者在main.js中注册，，或者每添加一个组件就需要手动注册一次。则直接进行自动化全局注册。

由于全局注册的行为必须在根 Vue 实例 (通过 new Vue) 创建之前发生。

在 Vue 3.0 项目的 main.js中，无法使用 Vue.component 进行组件注册, 取而代之的是 createApp() 返回的实例


//main.jsimport { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App);//vue3 基础组件的自动化全局注册
const requireComponent = require.context(// 其组件目录的相对路径'./components',// 是否查询其子目录false,// 匹配基础组件文件名的正则表达式/\.vue$/)requireComponent.keys().forEach(fileName => {// 获取组件配置const componentConfig = requireComponent(fileName)// 全局注册组件app.component(componentConfig.default.name,// 如果这个组件选项是通过 `export default` 导出的，// 那么就会优先使用 `.default`，// 否则回退到使用模块的根。componentConfig.default || componentConfig)})app.use(router)
app.mount('#app')

vue3 require.context 实现基础组件的自动化全局注册模块自动化加载（霸霸看了都说好）相关推荐

VUE之组件的动态注册和动态加载
目录问题描述项目中的应用使用总结问题描述实际项目中,针对不同的数据开发了不同的数据展示视图组件,例如:拓扑图.热力图.地图.每一类视图都有一个独立的.vue组件,在界面化管理平台上,要实现可 ...
【Flutter】Image 组件 ( 配置本地 gif 图片资源 | 本地资源加载 placeholder )
文章目录一.配置本地 gif 图片资源二.本地资源加载 Placeholder 三.完整代码示例四.相关资源一.配置本地 gif 图片资源配置 assets 图片资源 : 将 gif 图片拷 ...
js实现审批流_小程序瀑布流组件:支持翻页与图片懒加载
电商小程序中,用到瀑布流的地方非常多,每次都写一个瀑布流,重复一次逻辑,作为程序员,肯定是非常不愿意的. 瀑布流的形式都是大同小异,不同的是瀑布流中每个模块的内容,随业务而变化. 所以,我们把瀑布流框 ...
swiper 定义放多少张图片_小程序瀑布流组件:支持翻页与图片懒加载
(给前端大全加星标,提升前端技能) 作者:老人羽海 https://segmentfault.com/a/1190000022680541 电商小程序中,用到瀑布流的地方非常多,每次都写一个瀑布流,重 ...
Spring Cloud Alibaba基础教程：Nacos配置的多文件加载与共享配置
<Spring Cloud Alibaba基础教程>连载中,关注我一起学期!前情回顾: <使用Nacos实现服务注册与发现> <支持的几种服务消费方式> <使 ...
自制 require 函数：让浏览器轻松实现 js 文件按需加载
唉?这种文章你也点进来看,你不知道有 LABjs.RequireJS.SeaJS... 这些库吗? 反正我是没用过这些库,什么 AMD .CMD 哪来那么多术语... 前端的库太多了,要看各种乱七八糟 ...
分页组件change_javascript原生瀑布流+图片懒加载组件
我不是天使:javascript原生手动分页组件zhuanlan.zhihu.com 我不是天使:javascript原生自定义轮播图组件zhuanlan.zhihu.com 一大早就去办签证,啦 ...
vue 项目，父组件中每次点击按钮重新加载子组件，（重新生成dom 元素）
vue是组件化开发的项目,很多情况下会把公共组件提取出来,来减少代码量,提高开发效率,和以后更好的可维护性.很多情况下,父组件中都会引用子组件这种情况.通过给在父组件中引用的子组件标签上添加属性,来渲 ...
Android动态listview,Android列表组件ListView使用详解之动态加载或修改列表数据
在使用ListView组件来显示列表数据时,有的时候我们需要改变列表中的数据,有以下方法: 1.重新给ListView组件设置适配器这种方法重新创建了ListView,效率不好. 2.使用适配器中的 ...

vue3 require.context 实现基础组件的自动化全局注册模块自动化加载（霸霸看了都说好）

vue3 require.context 实现基础组件的自动化全局注册模块自动化加载（霸霸看了都说好）相关推荐

最新文章

热门文章

vue3 require.context 实现基础组件的自动化全局注册 模块自动化加载（霸霸看了都说好）

vue3 require.context 实现基础组件的自动化全局注册 模块自动化加载（霸霸看了都说好）相关推荐

最新文章

热门文章

vue3 require.context 实现基础组件的自动化全局注册模块自动化加载（霸霸看了都说好）

vue3 require.context 实现基础组件的自动化全局注册模块自动化加载（霸霸看了都说好）相关推荐