vue2.0和vue3.0获取当前文件夹下的所有vue文件区别

本文主要是介绍vue2.0和vue3.0获取当前文件夹下的所有vue文件区别,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

文章目录

    • vue2.0
    • vue3.0
    • 当前文件夹下的所有vue文件区别

vue2.0

  1. 在Vue 2.0项目中,要获取当前文件夹下的所有.vue文件,你可以使用Node.js的文件系统模块(fs)和路径模块(path)来实现。以下是一个简单的示例,演示如何列出特定文件夹下的所有.vue文件:
    const path = require('path');
    const files = require.context('./', false, /\.vue$/);
    console.log(path, files, 'filesfiles');
    const modules = {};
    files.keys().forEach((key) => {const name = path.basename(key, '.vue');modules[name] = files(key).default || files(key);
    });
    export default modules;
    
    在这里插入图片描述
  2. 组件在其他地方中的应用
    // 加入element为获取的组件
    let element = {beforeCreate: Array(1),beforeDestroy: Array(1),cname: "导航组",computed: Object,configName: "c_home_menu",data: ƒ data(),defaultName: "menus",icon: "icondaohangzu1",methods: Object,mounted: ƒ mounted(),name: "home_menu",num: 1718182717610000,props: Object,render: ƒ render(),staticRenderFns: Array(0),type: 0,watch: Object,__file: "src/components/mobilePageDiy/home_menu.vue",_compiled: true,_scopeId: "data-v-ff5d6a5a",
    }
    // 获取data中定义的变量
    console.log(element.data().defaultConfig) 
    // 获取methods中的方法,并执行
    console.log(data.element.methods)
    

获取methods中的方法,打印出组件中的方法

vue3.0

  1. 在Vue 3中,你可以使用Vite作为构建工具来获取当前文件夹下的所有.vue文件。以下是一个简单的示例,展示如何使用import.meta.glob函数来实现这一点:
    import.meta.globEager 是 Vue3 中新增加的一个 API,用于在编译时期即加载所有的模块。相比较于 import 和 require,import.meta.globEager 是一种更加高效的加载方式。
    使用import.meta.globEager批量导入文件,第一次进入很慢(created断点都需要几秒才能进入)
    解决方法:使用import.meta.glob+defineAsyncComponent异步批量导入(秒进created的断点)
    // 在Vue组件中使用import.meta.glob
    <script setup>
    import { defineAsyncComponent } from 'vue';
    // 使用import.meta.glob来匹配当前目录下所有的.vue文件
    const vueFiles = import.meta.glob('./*.vue');
    // 如果你想获取文件列表,而不是模块对象,可以使用下面的代码
    // const vueFilePaths = Object.keys(vueFiles);
    const components = import.meta.globEager('./components/*.vue');
    console.log(modules, components);
    const obj = {};
    Object.keys(modules).forEach((key: string) => {const viewSrc = components[key];const file = viewSrc.default;const name = file.name;obj[name] = defineAsyncComponent(file);
    });
    export default obj;
    </script>
    
    在这里插入图片描述
    2. 在组件中的运用
    let element = {components: {CBgColor: {}, CCascader: {}, CFoot: {}, CGoods: {}, CHotWord: {},},componentsName: "auxiliary_box",name: "CAuxiliaryBox",props: {activeIndex: {}, num: {}, index: {}},render: ƒ _sfc_render(_ctx, _cache, $props, $setup, $data, $options),setup: setup(props) { const store = mobildConfigModalStore(); let configObj = ref({}); let rCom = ref([]); onMounted(() => {},__file: "D:/weibao/wb-saas-web/src/views/ecommerce/system/homeDecoration/mobileConfigDiyStyle/c_auxiliary_box.vue",__hmrId: "78eea2c2",
    }
    // 调用组件中setUp方法中return出来的数据
    const useXxx = data.element.setup;
    // 若使用了props需要进行传参
    const dataP = useXxx({ num: towD.num });
    properties = dataP.defaultConfig.value;
    

当前文件夹下的所有vue文件区别

在Vue 2.x和Vue 3.x中获取当前文件夹下所有.vue文件的差异通常不是由Vue框架本身直接支持的,而是由构建工具(如Webpack或Vite)处理的

这篇关于vue2.0和vue3.0获取当前文件夹下的所有vue文件区别的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1056843

相关文章

Android kotlin中 Channel 和 Flow 的区别和选择使用场景分析

《Androidkotlin中Channel和Flow的区别和选择使用场景分析》Kotlin协程中,Flow是冷数据流,按需触发,适合响应式数据处理;Channel是热数据流,持续发送,支持... 目录一、基本概念界定FlowChannel二、核心特性对比数据生产触发条件生产与消费的关系背压处理机制生命周期

Javaee多线程之进程和线程之间的区别和联系(最新整理)

《Javaee多线程之进程和线程之间的区别和联系(最新整理)》进程是资源分配单位,线程是调度执行单位,共享资源更高效,创建线程五种方式:继承Thread、Runnable接口、匿名类、lambda,r... 目录进程和线程进程线程进程和线程的区别创建线程的五种写法继承Thread,重写run实现Runnab

C++中NULL与nullptr的区别小结

《C++中NULL与nullptr的区别小结》本文介绍了C++编程中NULL与nullptr的区别,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编... 目录C++98空值——NULLC++11空值——nullptr区别对比示例 C++98空值——NUL

Conda与Python venv虚拟环境的区别与使用方法详解

《Conda与Pythonvenv虚拟环境的区别与使用方法详解》随着Python社区的成长,虚拟环境的概念和技术也在不断发展,:本文主要介绍Conda与Pythonvenv虚拟环境的区别与使用... 目录前言一、Conda 与 python venv 的核心区别1. Conda 的特点2. Python v

Python使用OpenCV实现获取视频时长的小工具

《Python使用OpenCV实现获取视频时长的小工具》在处理视频数据时,获取视频的时长是一项常见且基础的需求,本文将详细介绍如何使用Python和OpenCV获取视频时长,并对每一行代码进行深入解析... 目录一、代码实现二、代码解析1. 导入 OpenCV 库2. 定义获取视频时长的函数3. 打开视频文

Go语言中make和new的区别及说明

《Go语言中make和new的区别及说明》:本文主要介绍Go语言中make和new的区别及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1 概述2 new 函数2.1 功能2.2 语法2.3 初始化案例3 make 函数3.1 功能3.2 语法3.3 初始化

MySQL 获取字符串长度及注意事项

《MySQL获取字符串长度及注意事项》本文通过实例代码给大家介绍MySQL获取字符串长度及注意事项,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录mysql 获取字符串长度详解 核心长度函数对比⚠️ 六大关键注意事项1. 字符编码决定字节长度2

深度解析Spring Boot拦截器Interceptor与过滤器Filter的区别与实战指南

《深度解析SpringBoot拦截器Interceptor与过滤器Filter的区别与实战指南》本文深度解析SpringBoot中拦截器与过滤器的区别,涵盖执行顺序、依赖关系、异常处理等核心差异,并... 目录Spring Boot拦截器(Interceptor)与过滤器(Filter)深度解析:区别、实现

python3如何找到字典的下标index、获取list中指定元素的位置索引

《python3如何找到字典的下标index、获取list中指定元素的位置索引》:本文主要介绍python3如何找到字典的下标index、获取list中指定元素的位置索引问题,具有很好的参考价值,... 目录enumerate()找到字典的下标 index获取list中指定元素的位置索引总结enumerat

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》:本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载(1)下载地址(2)系统选择(3)版本选择2、安装部署(1)解压(2)配置文件修改(3)启动(4)