Vue3拥抱TypeScript的完整项目结构搭建

点击上方 程序员成长指北&＃xff0c;关注公众号

回复1&＃xff0c;加入高级Node交流群

一个完整的Vue3&＃43;Ts项目,支持.vue和.tsx写法

项目地址&＃xff1a;https://github.com/vincentzyc/vue3-demo.git

作者&＃xff1a;TinssonTai

https://juejin.im/post/6875713523968802829

TypeScript 是JS的一个超集&＃xff0c;主要提供了类型系统和对ES6的支持&＃xff0c;使用 TypeScript 可以增加代码的可读性和可维护性&＃xff0c;在 react 和 vue 社区中也越来越多人开始使用TypeScript。从最近发布的 Vue3 正式版本来看&＃xff0c; Vue3 的源码就是用 TypeScript 编写的&＃xff0c;更好的 TypeScript 支持也是这一次升级的亮点。当然&＃xff0c;在实际开发中如何正确拥抱 TypeScript 也是迁移至 Vue3 的一个小痛点&＃xff0c;这里就针对 Vue3 和 TypeScript 展开一些交流。

96.8%的代码都是TypeScript&＃xff0c;支持的力度也是相当大&＃x1f4aa;

• Vue3入口: https://github.com/vuejs/vue-next

项目搭建

在官方仓库的 Quickstart 中推荐用两种方式方式来构建我们的 SPA 项目&＃xff1a;

• vite

npm init vite-app sail-vue3 # OR yarn create vite-app sail-vue3

• vue-cli

npm install -g &＃64;vue/cli # OR yarn global add &＃64;vue/cli
vue create sail-vue3
# select vue 3 preset

vite 是一个由原生ESM驱动的Web开发构建工具&＃xff0c;打开 vite 依赖的 package.json 可以发现在 devDependencies 开发依赖里面已经引入了TypeScript &＃xff0c;甚至还有 vuex , vue-router , less , sass 这些本地开发经常需要用到的工具。vite 轻量&＃xff0c;开箱即用的特点&＃xff0c;满足了大部分开发场景的需求&＃xff0c;作为快速启动本地 Vue 项目来说&＃xff0c;这是一个非常完美的工具。

后面的演示代码也是用vite搭的

从 vue2.x 走过来的掘友肯定知道 vue-cli 这个官方脚手架&＃xff0c; vue3 的更新怎么能少得了 vue-cli 呢&＃xff0c; vue-cli 更强调的是用 cli 的方式进行交互式的配置&＃xff0c;选择起来更加灵活可控。丰富的官方插件适配&＃xff0c;GUI的创建管理界面&＃xff0c;标准化开发流程&＃xff0c;这些都是 vue-cli 的特点。

• vue-cli ✖ TypeScript STEP1

• vue-cli ✖ TypeScript STEP2

想要预装TypeScript&＃xff0c;就需要选择手动配置&＃xff0c;并check好TypeScript

忘记使用选择 TypeScript 也没事&＃xff0c;加一行cli命令就行了

vue add typescript

最后&＃xff0c;别忘了在 .vue 代码中&＃xff0c;给 script 标签加上 lang&＃61;"ts"

• tsx写法

import { ref, reactive } from "vue";
import { AddressList, NavBar, Toast, Popup } from "vant";
import AddressEdit from &＃39;./AddressEdit&＃39;
import router from &＃39;&＃64;/router&＃39;export default {setup() {const chosenAddressId &＃61; ref(&＃39;1&＃39;)const showEdit &＃61; ref(false)const list &＃61; reactive([{id: &＃39;1&＃39;,name: &＃39;张三&＃39;,tel: &＃39;13000000000&＃39;,address: &＃39;浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室&＃39;,isDefault: true,},{id: &＃39;2&＃39;,name: &＃39;李四&＃39;,tel: &＃39;1310000000&＃39;,address: &＃39;浙江省杭州市拱墅区莫干山路 50 号&＃39;,},])const disabledList &＃61; reactive([{id: &＃39;3&＃39;,name: &＃39;王五&＃39;,tel: &＃39;1320000000&＃39;,address: &＃39;浙江省杭州市滨江区江南大道 15 号&＃39;,},])const onAdd &＃61; () &＃61;> {showEdit.value &＃61; true}const onEdit &＃61; (item: any, index: string) &＃61;> {Toast(&＃39;编辑地址:&＃39; &＃43; index);}const onClickLeft &＃61; () &＃61;> {router.back()}const onClickRight &＃61; () &＃61;> {router.push(&＃39;/todoList&＃39;)}return () &＃61;> {return ();};}
};

结束

不知不觉&＃xff0c; Vue 都到3的One Piece时代了&＃xff0c; Vue3 的新特性让拥抱 TypeScript 的姿势更加从容优雅&＃xff0c; Vue 面向大型项目开发也更加有底气了&＃xff0c;点击查看更多。

Node 社群我组建了一个氛围特别好的 Node.js 社群&＃xff0c;里面有很多 Node.js小伙伴&＃xff0c;如果你对Node.js学习感兴趣的话&＃xff08;后续有计划也可以&＃xff09;&＃xff0c;我们可以一起进行Node.js相关的交流、学习、共建。下方加 考拉 好友回复「Node」即可。如果你觉得这篇内容对你有帮助&＃xff0c;我想请你帮我2个小忙&＃xff1a;1. 点个「在看」&＃xff0c;让更多人也能看到这篇文章2. 订阅官方博客 www.inode.club 让我们一起成长点赞和在看就是最大的支持❤️