.text-color{color:var(--color);}一个完整的Vue3+Ts项目，支持.vue和.tsx写法项目地址：https://github.com/vincentzyc/vue3-demo.gitTypeScript是JS的超集，主要提供类型系统和对ES6的支持。使用TypeScript可以增加代码的可读性和可维护性。React和Vue社区中越来越多的人开始使用TypeScript。从最近发布的Vue3正式版来看，Vue3的源代码是用TypeScript编写的，更好的TypeScript支持也是本次升级的亮点。当然，在实际开发中如何正确拥抱TypeScript也是迁移到Vue3的一个小痛点。这里有一些关于Vue3和TypeScript的交流。96.8%的代码是TypeScript，支持相当强。💪Vue3入口：https://github.com/vuejs/vue-next项目在官方仓库的Quickstart中搭建。推荐使用两种方式构建我们的SPA项目：vitenpminitvite-appsail-vue3#ORyarncreatevite-appsail-vue3vue-clinpminstall-g@vue/cli#ORyarnglobaladd@vue/clivuecreatesail-vue3#selectvue3presetvite是一个web开发和构建工具原生ESM驱动，打开vite依赖package.json可以看到devDependencies开发依赖中已经引入了TypeScript，甚至还有本地开发经常用到的vuex、vue-router、less、sass工具。Vite轻量级、开箱即用，满足大多数开发场景的需求。它是快速启动本地Vue项目的完美工具。下面的demo代码也是用vite搭建的。从vue2.x过来的肯定知道vue-cli的官方脚手架。vue3的更新怎么能没有vue-cli呢？vue-cli强调使用cli交互配置，让选择更加灵活可控。丰富的官方插件适配，GUI创建管理界面，标准化的开发流程，这些都是vue-cli的特点。vue-cli?TypeScriptSTEP1vue-cli?TypeScriptSTEP2如果要预装TypeScript，需要选择手动配置，勾选TypeScript。忘记使用TypeScript也没关系。只需添加一行cli命令。代码中在script标签中添加lang="ts"....text-color{color:var(--color);}tsx写import{ref,reactive}from"vue";导入{地址essList,NavBar,Toast,Popup}from"vant";importAddressEditfrom'./AddressEdit'importrouterfrom'@/router'exportdefault{setup(){constchosenAddressId=ref('1')constshowEdit=ref(false)constlist=reactive([{id:'1',name:'张三',tel:'13000000000',address:'浙江省杭州市西湖区文三路138号东方通讯大厦7楼501室',isDefault:true,},{id:'2',name:'李四',tel:'1310000000',address:'浙江省杭州市拱墅区莫干山路50号',},])constdisabledList=reactive([{id:'3',name:'王武',tel:'1320000000',address:'浙江省杭州市滨江区江南大道15号',},])constonAdd=()=>{showEdit.value=true}constonEdit=(item:any,index:string)=>{Toast('编辑地址:'+index);}constonClickLeft=()=>{router.back()}constonClickRight=()=>{router.push('/todoList')}return()=>{return(
);};}};不知不觉Vue已经到了3的海贼王时代，Vue3的新特性让姿势拥抱TypeScript更从容优雅，Vue在大型项目开发中更有信心，点击查看更多
