Vite 是 Vue 团队推出的构建工具。

$$tip

如果你是一个初级前端工程师，那么只需要了解如何创建一个 Vite 构建的项目，和了解一些简单的配置。

$$

上手 Vite

1. 安装 Node.js。
2. 使用命令 npm create vite@latest 根据提示创建我们的 Vue 项目。
3. 进入项目， cd 项目目录 。
4. 安装所需第三方库， npm install 。
5. 运行项目， npm run dev 。

项目结构

使用 Vite 模板构建的项目结构如下。

• dist：运行 npm run build 后构建的文件，部署到服务器上时网站根目录需指向 dist 文件夹。
• node_modules：第三方库的文件夹。
• public：存放静态资源的文件夹，比如图片之类。
• src：项目代码文件夹。
• .gitignore：git 忽略的文件。
• index.html：入口页面。
• package-lock.json：记录所有第三方库（包括第三方库的第三方库）的版本号、来源、hash 值等相关信息，只要这个文件一致那么可以保证每次 install 之后的第三方库代码文件都会一致。
• package.json：记录当前项目相关的信息，比如项目所引用的第三方库名称和版本号，项目名、版本号、快捷命令等。
• README.md：markdown 格式的项目介绍文件。
• vite.config.js：vite 的配置文件。