Vue3通透教程【十七】Vite构建TS版本Vue项目

---

写在前面

专栏介绍：
凉哥作为 Vue 的忠实 粉丝输出过大量的 Vue 文章，应粉丝要求开始更新 Vue3 的相关技术文章，Vue 框架目前的地位大家应该都晓得，所谓三大框架使用人数最多，公司选型最多的框架，凉哥之前在文章中也提到过就是 Vue 框架之所以火起来的原因，和 Vue 框架相比其他框架的巨大优势，有兴趣的伙伴可以看一下 Vue框架背后的故事、尤大大对前端生态是这样看的，随着 Vue 框架不断的被认可，现如今的 Vue 框架已经是前端工程师必备的技能了，记得尤大大开发 Vue 的初衷，为了让自己的开发工作更加便捷，也希望这个框架能让更多人的开发工作变得轻松；现如今 Vue 框架做到了，尤大大做到了，当然在 20 年的 9 月 18 日，Vue 又向前端同僚们报告了一次大的突破 Vue3.0 版本正式发布！如今已经过去了两年多的时间，更多的公司选择了Vue3技术，所以凉哥也在这个时候为大家出这份专栏，本专栏将帮助大家掌握Vue3+TS技术，提升自己竞争力！

温故知新：
前面几篇文章中我们学习了TS的基本语法，感受了一下强类型语言TS的特殊之处，我们还通过tsc命令将TS转化为JS，本篇文章将带领大家通过Vite创建出TS版本的Vue3项目环境来感受TS融入到项目框架中的便捷之处，这样不需要我们频繁的去编译，Vite工具会帮助我们完成编译工作，让我们 let’s coding！

---

创建TS版本的Vue3项目

其实我们在本专栏第二篇文章中Vue3通透教程【二】更高效的构建工具-Vite中就为大家展示过Vite创建Vue3项目的流程，不知道大家还有没有印象，就是我们在其中的一个步骤中要求我们选择语言：JS/TS，当时我们选择的就是JS，那我们今天就来构建一个TS版本的Vue3项目吧！

npm create vite@latest

输入项目名称（这里我直接用的demo）

选择Vue

选择TS

创建成功进入目录安装依赖启动项目即可

安装依赖启动项目这样我们的项目就算创建完成了，有了Vite的支持我们就可以来学习Vue中的TS写法了，我们可以看到项目中包含了一些有关TS的配置内容。首先呢，我们的Vite到底有没有帮我们进行了转译呢？也就是我们现在在工程中去编写TS代码在不手动转化成JS的情况下是否可以在浏览器中运行呢？那我们就来尝试一下！

首先呢我在main.ts中去加入两行简单的代码来进行测试，我们发现我们写入了ts的代码在main.ts中，main.ts是被index.html文件引入了，最终在控制台12也被打印了，这就说明Vite确实讲我们的TS代码进行了转译。

---

插件安装

当然我们前面已经安装了TS的语法提示的插件，也已经基本满足我们的需求，如果你想要有更好的TS语法提示呢，你还可以安装一款vscode的插件，就是我们的 TypeScript Vue Plugin (Volar) 插件！

写在最后

今天这篇文章主要就是带领大家来搭建基础的Vue3+TS版本的项目，我们前面几篇文章中对TS的语法讲解，大家可以多看两遍多一些联系，能够更好的掌握TS的一些语法。有助于我们后续V3+TS的结合编码，今天大家跟着文章内容先初始化我们的V3+TS项目吧，下篇文章中我们来体验一下V3喝TS的结合；各位小伙伴让我们 let’s coding！

几何送书七十三期

参与方式：本博客中进行评论即可，只要评论内容不被折叠都可以参与抽奖；
抽奖方式：程序自动拉取未折叠的评论随机抽取3位伙伴，每人最多可评论5次；
抽奖时间：2023-07-11 17:00；
结果公布：待抽奖（2023-07-11 17:20会将结果公布到这里）
本期获奖者送实体书《ChatGPT全能应用一本通》和 《Power BI 数据分析与可视化实战》两本（包邮到家）

✨$原创不易，还希望各位大佬支持一下$

$点赞，你的认可是我创作的动力！$

⭐️ $收藏，你的青睐是我努力的方向！$

✏️ $评论，你的意见是我进步的财富！$