目录
一、Vite简介
Vite是一个新型前端构建工具，启动快构建快速度惊人，开发体验比Webpack好得多，主要由两部分组成：
1. 一个开发服务器，它利用了现代浏览器的原生ES模块解析能力，可以实现非常快速的热更新(HMR)，从而大大加快了构建速度。
2. 一套构建指令，使用 Rollup 打包代码，在生产环境使用预配置可以将所有的模块预打包，生成高性能的静态资源，可以大大加快冷启动的速度。
二、准备工作
1.安装Nodejs Vite因为模块兼容性需要node.js版本16+，安装方法请移步：MacOS安装Node.js
2.安装Yarn，安装方法请移步：Yarn的安装和使用
三、搭建方法
创建目录
本地创建一个vite目录，用于存放Vite项目
mkdir vite创建Vue项目
打开终端执行命令
yarn create vite开始安装[email protected]模块，Project name缺省是vite-project，按回车继续
选择framework，使用上下键选择Vue，按回车继续
可选TypeScript和JavaScript，会创建一个简单项目，为了定制化Vue项目，这里我们选择使用Customize with create-vue
除了End-to-End Testing Solution(端到端测试方案)选了No，其他都选了Yes
构建Vue项目
依次执行如下命令：
cd vite-project //切换目录
yarn //安装依赖
yarn format //格式化代码
yarn dev //启动项目
浏览器输入http://localhost:5173，出现下图表示Vite+Vue3创建项目成功。
代码结构
使用VsCode+Volar扩展打开项目，代码结构如下：
主要文件说明
├── node_modules/ // 所有第三方模块
├── publish/ // 静态资源目录(如图片)
└── src/
├── assets/ // 静态资源目录(css，font，img)
├── components/ // 公共组件目录
├── router/ // 路由配置目录
├── stores/ // 状态管理目录，vue3使用pinia代替vuex
├── views/ // 页面组件目录
├── App.vue // 根组件，vue页面资源的首加载项
├── main.ts // 入口ts文件，初始化vue实例
├── .eslintrc.cjs // 检测js代码风格
├── .prettierrc.json // 代码格式化配置
├── env.d.ts // 环境变量文件
├── index.html // 首页html
├── tsconfig.app.json // 用于dom的TypeScript编译器配置文件
├── tsconfig.json // 总的TypeScript编译器配置文件
├── tsconfig.node.json // 用于node环境的TypeScript编译器配置文件
├── tsconfig.vitest.json // 用于vite测试的TypeScript编译器配置文件
├── vite.config.ts // Vite配置文件，用于配置Vite的选项和插件。
├── vitest.config.ts // Vite测试配置文件
├── package.json // 管理vue所有环境依赖项
└── yarn.lock // yarn自动生成的锁定文件，用于确保在不同环境中安装相同版本的依赖项，不要手动编辑