在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>

三、实际效果

相关推荐
别拿曾经看以后~14 分钟前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
我要洋人死17 分钟前
导航栏及下拉菜单的实现
前端·css·css3
川石课堂软件测试20 分钟前
性能测试|docker容器下搭建JMeter+Grafana+Influxdb监控可视化平台
运维·javascript·深度学习·jmeter·docker·容器·grafana
科技探秘人29 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人29 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR35 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香37 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q24985969339 分钟前
前端预览word、excel、ppt
前端·word·excel
小华同学ai1 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
problc1 小时前
Flutter中文字体设置指南:打造个性化的应用体验
android·javascript·flutter