首页 > 其他分享 >import.meta.globEager('./src/components/**/*.vue'); 遍历文件

import.meta.globEager('./src/components/**/*.vue'); 遍历文件

时间:2023-11-01 11:36:48浏览次数:40  
标签:src vue const modules 目标 meta key

main.js

const importAll = (modules) => {
  Object.keys(modules).forEach((key) => {
    const component = key.replace('/src/', '@/').replace('.vue', '');
    const componentName = key.split('/').slice(-2, -1)[0] + '-page';
    app.component(componentName, modules[key].default);
  });
};
// 动态导入src/pages目录下的所有子文件
const modules = import.meta.globEager('@/page/**/*.vue');

importAll(modules);

资料

vue3 动态导入src/page目录下的所有子文件,并自动注册所有页面组件

---------------------------------------------
生活的意义就是你自己知道你要做什么,明确目标。没有目标,后面都是瞎扯!

https://pengchenggang.gitee.io/navigator/

SMART原则:

目标必须是具体的(Specific)
目标必须是可以衡量的(Measurable)
目标必须是可以达到的(Attainable)
目标必须和其他目标具有相关性(Relevant)
目标必须具有明确的截止期限(Time-based)



标签:src,vue,const,modules,目标,meta,key
From: https://blog.51cto.com/u_15770151/8120189

相关文章

  • Vue数据更新页面却没有更新的几种情况以及解决方法
    情况一:Vue无法检测实例被创建时不存在于data中的变量原因:由于Vue会在初始化实例时对data中的数据执行getter/setter转化,所以变量必须在data对象上存在才能让Vue将它转换为响应式的。例如: 12345newVue({  data:{},  template:'<div>{{message......
  • vue路由模式区别
    目的:在vue中路由模式有history和hash模式两种模式:他们的目的是为了在SPA单页面情况下,切换页面不会向后端服务器发送请求;hash模式:为以#作为分隔符,原理:通过window.location.hash获取hash值;监听hash中的hashchange事件,当URL的hash发生改变的时候,触发事件。在地......
  • vuejs3.0 从入门到精通——初始化项目——路由
    路由 VueRouter是Vue.js官方的路由管理器,它和Vue.js深度集成,用于构建单页面应用。Vue.js单页面应用是基于路由和组件映射的,路由用于配置访问路径,将组件(components)映射到路由路径(routes)。一、路由模式 VueRouter常用的两种模式是hash模式和HTML5模式,对应的创建......
  • 二、搭建前后端分离的自动化测试平台的前端Vue3+Element-plus前端项目
    一、安装Node.js以及配置环境变量1、Node获取地址https://nodejs.org/en/download一直默认选项安装,安装好了之后,在环境变量中会自动配置Node的地址,可以在cmd中使用node-v/npm-v命令验证是否下载成功2、设置Node的配置内容(1)在安装目录下新建两个文件夹命名为node_cache,和no......
  • vue3实现input输入框只能输入中文
    简单记录下,方便以后复制<el-inputv-model="form.name"placeholder="使用人的姓名":maxlength="20":formatter="(value)=>value.replace(/[^\u4E00-\u9FA5]/g,'')"/>......
  • 前端大文件切片上传,断点续传、秒传等解决方案,vue中使用实例
    先看逻辑如何切片?如何获取文件唯一hash?与后端交互获取文件上传的状态,用于判断情况,是秒传还是续传?上传切片文件,判断失败文件重新执行?全部上传完成通知后端?1、先上全部代码,后面第2部分解析、第3部分vue中使用相关依赖spark-md5主要用于拿取文件的md5mitt发布订阅importSparkMD5......
  • [Vue]什么是组件化?
    组件的定义:实现应用中局部功能代码和资源的集合。   ......
  • App开发:Vue Native vs React Native
    随着移动应用开发框架数量的增加,2018年Vue Native的引入让开发者有能力使用Vue.js代码来创建ReactNative移动应用。因为VueNative围绕 React Native包装了Vue.js语法,所以框架非常相似。例如,两者都是跨平台框架,这意味着相同的代码库可以编译为适用于Android和iOS环......
  • 关于 vue 虚拟dom 的渲染机制的一些思考
    1.虚拟dom的渲染过程2.vue3中nexttick的作用 1.虚拟dom的渲染机制我们在template中写的div和其他的标签。不会被vue当作是最终渲染的dom,vue会将我们写入的标签转化为对象,通过diff算法,将其构造成一个虚拟树每个树都有一个对应的key,这个key作为不同阶段的标......
  • Vue2 基础入门
    1Vue1.2第一个Vue实例(HelloVue)1.3插值表达式{作用:利用表达式进行插值,渲染到页面中表达式:是可以被求值的代码,JS引擎会讲其计算出一个结果以下的情况都是表达式:money+100money-100money*10money/10price>=100?'真贵':'还行'obj.namearr[0]fn()ob......