如何创建一个Vue3+Vite+TS项目vite使用 esbuild 预构建依赖,使用rollup进行打包，天然支持ts

为什么使用vite

Vite 将会使用 esbuild 预构建依赖。Esbuild 使用 Go 编写，并且比以 JavaScript 编写的打包器预构建依赖快 10-100 倍
使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源
模块热重载HMR: 具有 HMR 功能的框架可以利用该 API 提供即时、准确的更新，而无需重新加载页面或清除应用程序状态。
默认的构建目标浏览器是能在 script 标签上支持原生 ESM 和原生 ESM 动态导入
天然支持 ts: Vite 使用 esbuild 将 TypeScript 转译到 JavaScript，约是 tsc 速度的 20~30 倍，同时 HMR 更新反映到浏览器的时间小于 50ms

使用vite初始化一个项目

使用 npm

npm init vite@latest

或者使用 yarn

yarn create vite

此处输入项目名称（我们采用默认的，直接敲回车）

选择使用的框架 (我们选择vue 敲回车)

选择语法类型

此时项目就创建好了

进入项目，安装依赖

使用 yarn dev 启动项目

访问 http://127.0.0.1:5173/

项目已经成功运行起来了

vite项目目录结构

|-- public     public目录下的文件不会被编译，可以用来存放静态资源
|-- src
  |-- assets        assets目录下存放可编译的静态资源
  |-- components    components目录下存放组件
  |-- App.vue       全局组件
  |-- main.ts       全局TS文件
  |-- style.csss    全局样式文件
  |-- vite-env.d.ts
|-- .gitignore
|-- index.html      入口文件
|-- package.json
|-- README.md
|-- tsconfig.json
|-- tsconfig.json
|-- tsconfig.node.json
|-- vite.config.ts    vite的配置文件