在vue项目里面使用index.ts进行统一导出

目录

一、概述

二、具体实践

2.1创建目录

2.2index.ts文件内容展示

2.2在需要的vue文件里面import

2.3vue全代码

三、实际效果


一、概述

一般我们在做项目的时候会发现vue文件里面没有export default

转而替代的是使用同目录下index.ts进行统一导出

好处:能够让项目的结构变的清晰,提高代码可维护性和可读性,统一管理导出

坏处:这样实质上效率没提升多少,反而不能立刻得知组件文件存放具体位置

二、具体实践

2.1创建目录

2.2index.ts文件内容展示

import ClassAndStyleVue from "./ClassAndStyle.vue";
import computerAttributeVue from "./computerAttribute.vue";
import echartTestVue from "./echartTest.vue";
import HelloWorldVue from "./HelloWorld.vue";
import Hellolqd from "./HelloLqd.vue";
import htmlTest from "./htmlTest.vue";
import MyIfShowForVue from "./MyIfShowFor.vue";export {ClassAndStyleVue ,computerAttributeVue,echartTestVue,HelloWorldVue,Hellolqd,htmlTest,MyIfShowForVue,}

2.2在需要的vue文件里面import

<script lang="ts" setup>// import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
// import HelloKqd from '@/components/HelloLqd.vue';
// import HtmlTest from '@/components/htmlTest.vue'
// import ComputeAttribute from '@/components/computerAttribute.vue'
// import ClassAndStyle from '@/components/ClassAndStyle.vue'
// import MyIfShowFor from '@/components/MyIfShowFor.vue'// import EchartTest from '@/components/echartTest.vue'
import {echartTestVue} from '@/components/index'</script>

注意看,使用统一导出就需要使用解包了,而且制定到index目录

坏消息是我们不能像之前那样在import后面随便写名字了

好消息是我们依旧可以使用as 来进行重命名

2.3vue全代码


<template><div class="home"><!-- <img alt="Vue logo" src="../assets/logo.png"> --><!-- <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/> --><!-- <HelloKqd></HelloKqd> --><!-- <HtmlTest></HtmlTest> --><!-- <ComputeAttribute></ComputeAttribute> --><!-- <ClassAndStyle></ClassAndStyle> --><!-- <MyIfShowFor></MyIfShowFor> --><!-- <EchartTest></EchartTest> --><echartTestVue></echartTestVue></div>
</template><script lang="ts" setup>// import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
// import HelloKqd from '@/components/HelloLqd.vue';
// import HtmlTest from '@/components/htmlTest.vue'
// import ComputeAttribute from '@/components/computerAttribute.vue'
// import ClassAndStyle from '@/components/ClassAndStyle.vue'
// import MyIfShowFor from '@/components/MyIfShowFor.vue'// import EchartTest from '@/components/echartTest.vue'
import {echartTestVue}  from '@/components/index'</script>

三、实际效果

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/144610.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux的root用户

拥有最大权限的用户名为root su和exit命令 su命令就是用于账户切换的系统命令Switch user 语法&#xff1a;su - [用户名] -符号可选&#xff0c;表示是否在切换用户后加载环境变量&#xff0c;建议带上 参数&#xff1a;用户名&#xff0c;表示要切换的用户&#xff0c;用…

Flutter有状态组件StatefulWidget生命周期

StatefulWidget是Flutter中的一个有状态的组件&#xff0c;它的生命周期相对复杂一些。下面是StatefulWidget的生命周期方法及其调用顺序&#xff1a; 1. createState(): 当StatefulWidget被插入到Widget树中时&#xff0c;会调用createState()方法来创建与之关联的State对象。…

【开源】基于Vue.js的校园二手交易系统的设计和实现

目录 一、摘要1.1 项目介绍1.2 项目详细录屏 二、功能模块2.1 数据中心模块2.2 二手商品档案管理模块2.3 商品预约管理模块2.4 商品预定管理模块2.5 商品留言板管理模块2.6 商品资讯管理模块 三、实体类设计3.1 用户表3.2 二手商品表3.3 商品预约表3.4 商品预定表3.5 留言表3.6…

如何正确使用GPT工具

引言 在快速发展的数字时代&#xff0c;人工智能&#xff08;AI&#xff09;已成为科研领域的一个不可或缺的工具。特别是像ChatGPT这样的AI聊天机器人&#xff0c;它通过高效的语言模型和深度学习算法&#xff0c;为科研工作者提供了前所未有的辅助。从文献搜索到数据分析&…

sqlmap requires ‘python-pymysql‘ third-party library

使用sqlmap进行udf提权报错&#xff1a; [14:06:04] [CRITICAL] sqlmap requires python-pymysql third-party library in order to directly connect to the DBMS MySQL. You can download it from https://github.com/PyMySQL/PyMySQL. Alternative is to use a package pyt…

asp.net core mvc之 过滤器

过滤器允许我们在Action执行之前和执行之后去执行一下业务代码 一、过滤器的作用域 1、全局过滤器&#xff0c; 在Startup.cs文件中注册 2、控制器过滤器&#xff0c; 在控制器类上面使用标注 3、action过滤器 二、全局过滤器使用 1、在 core 目录&#xff0c;添加 TestA…

MySQL(18):MySQL8.0的其它新特性

MySQL从5.7版本直接跳跃发布了8.0版本。 MySQL8.0 新增特征 1.更简便的NoSQL支持。 NoSQL泛指非关系型数据库和数据存储。随着互联网平台的规模飞速发展&#xff0c;传统的关系型数据库已经越来越不能满足需求。从5.6版本开始&#xff0c;MySQL就开始支持简单的NoSQL存储功能…

Servlet 常见的API

文章目录 写在前面Smart Tomcat 插件Servlet 中常见的API1. HttpServletinit 方法destroy 方法service 方法Servlet 的生命周期 使用 postman 构造请求使用 ajax 构造请求2. HttpServletRequest3. 前端给后端传参1). GET, query string2). POST, form3). json 4. HttpServletRe…

11_聚类算法

文章目录 1 聚类1.1 什么是聚类1.2 相似度/距离公式1.3 聚类的思想 2 K-means算法2.1 K-means算法步骤2.2 K-means算法思考2.3 K-means算法优缺点 3 解决K-Means算法对初始簇心比较敏感的问题3.1 二分K-Means算法3.2 K-Means算法3.3 K-Means||算法3.4 Canopy算法3.4.1 Canopy算…

链栈的基本操作c语言

链栈是一种栈的实现方式&#xff0c;使用链表来存储栈中的元素。下面是链栈的基本操作的C语言实现&#xff1a; #include <stdio.h> #include <stdlib.h>// 定义链栈的结点结构 typedef struct Node {int data; // 存储数据struct Node* next; // 指向下…

Postman实现接口的加密和解密

近期在复习Postman的基础知识&#xff0c;在小破站上跟着百里老师系统复习了一遍&#xff0c;也做了一些笔记&#xff0c;希望可以给大家一点点启发。 1、目前市面上的加密的方式 对称式加密&#xff1a;DES&#xff0c;AES&#xff0c;Base64加密算法 非对称加密&#xff1a…

elasticsearch+canal增量、全量同步

目录 一、搭建环境&#xff1a; 1.1 下载软件上传到linux目录/data/soft下 1.2 把所有软件解压到/data/es-cluster 二、单节点&#xff08;多节点同理&#xff09;集群部署elasticsearch 2.1 创建es用户 2.2 准备节点通讯证书 2.3 配置elasticsearch&#xff0c;编辑/d…

城市内涝对策,万宾科技内涝积水监测仪使用效果

随着城市化进程的加速&#xff0c;城市道路积水问题明显越来越多&#xff0c;给人们的出行和生活带来更多的不便。内涝积水监测仪作为高科技产品能够实时监测道路积水情况&#xff0c;为城市排水系统的管理和维护提供重要的帮助。 在城市生命线的基础设施规划之中&#xff0c;地…

40-设计问题-最小栈

原题链接&#xff1a; 198. 打家劫舍 题目描述&#xff1a; 你是一个专业的小偷&#xff0c;计划偷窃沿街的房屋。每间房内都藏有一定的现金&#xff0c;影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统&#xff0c;如果两间相邻的房屋在同一晚上被小偷闯入&a…

【Spring】Spring中的DI(依赖注入)Dependence Import

由之前的IoC可以知道&#xff0c;我们写在具体对象后面的new方法肯定不能要了&#xff0c;这时候就要通过依赖注入的形式将Dao配置到Service中 Dependence Import的步骤如下&#xff1a; 1. 在Service类中给Dao提供setter方法 原本我们是直接给bookDao new了一个对象 public …

深入理解MongoDB的CRUD操作

MongoDB&#xff0c;一个广受欢迎的NoSQL数据库&#xff0c;以其灵活的文档模型、强大的查询能力和易于扩展的特性而著称。对于初学者和经验丰富的开发人员来说&#xff0c;熟练掌握MongoDB的增删改查&#xff08;CRUD&#xff09;操作是至关重要的。本博客将深入探讨如何在Mon…

【AI视野·今日Sound 声学论文速览 第三十四期】Thu, 26 Oct 2023

AI视野今日CS.Sound 声学论文速览 Thu, 26 Oct 2023 Totally 9 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Sound Papers Dynamic Processing Neural Network Architecture For Hearing Loss Compensation Authors Szymon Drgas, Lars Bramsl w, Archontis Poli…

AW2013芯片讲解

文章目录 前言一、AW2013芯片介绍二、AW2013从机地址三、AW2013读写时序AW2013写时序AW2013读时序 四、AW2013的INT引脚五、LED作用和配置描述LED控制PWM控制模式简短编程模式 六、AW2013寄存器讲解总结 前言 本篇文章将带大家学习AW2013芯片的使用。 一、AW2013芯片介绍 AW…

FPGA时序约束(七)文献时序约束实验测试

系列文章目录 文章目录 系列文章目录前言文献1:时钟移位LogiclockDesign Partition封装用户编写的程序停掉singletap抓取单端口RAM的数据文献2:SRAM约束前言 之前学习了一些基本时序约束的类别,包括主时钟约束、虚拟时钟约束、输入输出约束、多周期约束等等,但大多都是纸上…

websocket学习笔记【springboot+websocket聊天室demo】

文章目录 WebSocket是什么&#xff1f;为什么需要WebSocket?WebSocket和Http连接的区别WebSocket的工作原理基本交互过程&#xff1a; Java中的WebSocket支持WebSocket的优势springboot websocket themlef 一个聊天室demopom.xmlWebSocketConfigChatControllerWebController…