搭建vue3项目（VUE3+TS+vite）

1、确保已经安装了 Node.js 、 npm、Vite

确保你的计算机上安装了 Node.js 和 npm。你可以从官方网站 Node.js 下载并安装。

在安装了npm的前提下在安装vite,打开终端（命令行界面）并运行以下命令来全局安装 Vite：

npm install -g create-vite

2、在将要创建项目的目录文件夹下打开cmd，输入命令

create-vite jt-design --template vue-ts

这会在当前目录下创建一个名为 jt-design 的项目，使用 vue-ts 模板，其中包括了 Vue 3 和 TypeScript 的配置

3、安装依赖、启动项目

可以选择用vscode 打开文件，在终端运行 npm install ，安装好依赖后启动项目，运行 npm run dev 命令启动 Vite 的开发服务器，这样就运行成功了

4、vscode 扩展推荐

在 Visual Studio Code（VSCode）中，为了提升 Vue 3 项目的开发体验，我们找了一些适用于vue开发的扩展，并且我们以安装数量由多到少的顺序排序了一下，以下就是常用的七个扩展：

1. Volar: 详细 Vetur 写过vue2的同学应该都多少知道一些，他是一个为 Vue.js 提供支持的扩展，它提供了对 .vue 文件的语法高亮、智能感知、错误检查等功能。但是Volar是专门为 Vue 3 设计的，它使用了新的 API 并提供了一些 Vue 3 的优化，可以更好地支持 Vue 3 的特性，如果写vue3项目的话可以将vetur先禁用。
2. Vue VSCode Snippets: Vue VSCode Snippets这个扩展为 Vue 文件提供了一系列的代码片段，可以加速你的编码过程。
3. ESLint: 如果你的项目使用 ESLint 进行代码检查，安装 ESLint 扩展可以让 VSCode 更好地与你的配置协同工作，显示 lint 错误和警告。
4. Prettier - Code formatter: Prettier 是一个代码格式化工具，可以使你的代码风格保持一致。与 ESLint 配合使用时，可以确保代码的整洁。
5. Debugger for Chrome: 如果你在 Vue 3 项目中使用了 Chrome 调试器，Debugger for Chrom这个扩展可以让你在 VSCode 中进行调试。
6. Path Intellisense: Path Intellisense这个扩展可以帮助你更轻松地引入文件或模块，对于大型的 Vue 3 项目尤其有用。
7. Auto Import: Auto Import 这个扩展可以自动导入你在项目中使用的模块，减少手动输入的工作。

！！注意：尽量按需下载，千万别一股脑全部安装了，否则到时候运行项目会卡顿的，我前期使用就只安装了Volar、Vue VSCode Snippets、Auto Import