一、Vite 简介
Vite 是一种新型的前端构建工具，旨在为现代 web 开发提供更快、更精简的开发体验。它由尤雨溪（Vue.js 的作者）团队开发，在当下的前端项目中被广泛应用，尤其适合基于现代 JavaScript 框架（如 Vue、React 等）构建的项目。
与传统的构建工具（如 Webpack）相比，Vite 利用了浏览器原生支持的 ES 模块（ES Modules），在开发阶段不需要像传统方式那样将所有模块提前打包，而是按需进行编译和加载，从而实现了极快的冷启动速度和模块热替换（HMR），大大提升了开发效率。
二、Vite 的核心特点
1. 快速的冷启动
在传统构建工具启动开发服务器时，往往需要对整个项目的代码进行打包分析等一系列复杂操作，耗时较长。而 Vite 基于 ES 模块的特性，在启动时只需启动一个轻量级的开发服务器，然后直接将浏览器指向源文件，浏览器会按照 ES 模块的规则自动去加载依赖，无需提前全量打包，所以能在瞬间启动项目，开发者可以快速进入开发状态。
例如，对于一个中大型的 Vue 项目，使用 Webpack 启动开发服务器可能需要数秒甚至十几秒，而 Vite 往往能在几百毫秒内就启动完成。
2. 高效的模块热替换（HMR）
当我们在开发过程中修改了代码，Vite 能够精准地定位到发生变化的模块，并仅仅更新该模块对应的内容在浏览器中的显示，无需刷新整个页面。这使得开发者可以实时看到代码修改后的效果，保持开发的连贯性，进一步提高开发效率。
比如在修改一个 Vue 组件的样式或者逻辑时，修改后几乎立即就能在浏览器中看到更新后的样子，操作体验非常流畅。
3. 原生 ES 模块支持
Vite 充分利用了现代浏览器原生支持 ES 模块这一特性。在开发阶段，Vite 直接将代码以 ES 模块的形式提供给浏览器，浏览器会按照 ES 模块的规范去解析和加载依赖，减少了中间转化的成本。不过在生产环境下，Vite 还是会对代码进行打包优化等处理，以保证最佳的性能和兼容性。
4. 插件化架构
Vite 拥有丰富的插件生态，通过插件可以轻松扩展其功能，满足各种不同的项目需求。无论是对特定文件类型的处理、优化开发体验，还是与第三方工具的集成等，都可以通过编写或使用现有的插件来实现。
例如，有插件可以帮助优化 CSS 的处理、实现对 SVG 文件的特殊处理，或者将项目与后端 API 进行更好的联调等。
三、Vite 的基本使用
1. 安装
要使用 Vite，首先需要全局安装它的脚手架工具：
npm install -g create-vite
# 或者使用 yarn
yarn global add create-vite
安装完成后，就可以用它来创建新项目了。
2. 创建项目
使用以下命令创建一个基于 Vite 的项目（以 Vue 项目为例）：
# 创建一个基于 Vue 的 Vite 项目，项目名称为 my-vite-project
create-vite my-vite-project --template vue
这里的 --template 参数可以指定不同的模板，除了 vue，还可以选择 react、preact 等，根据自己的项目框架需求来定。
创建完成后，进入项目目录：
cd my-vite-project
3. 安装项目依赖并启动开发服务器
在项目目录下，运行以下命令安装依赖：
npm install
# 或者
yarn install
然后启动开发服务器：
npm run dev
# 或者
yarn dev
此时，Vite 会启动开发服务器，并且在控制台输出项目运行的地址（一般是 http://localhost:3000 之类的），打开浏览器访问该地址，就能看到项目运行起来了。
4. 项目结构
一个典型的 Vite 项目结构如下：
my-vite-project/
├── node_modules/
├── public/
│ └── favicon.ico
├── src/
│ ├── assets/
│ ├── components/
│ ├── App.vue
│ └── main.js
├── index.html
├── package.json
├── vite.config.js
└── README.md
public目录：存放一些公共的静态资源，比如网站图标等，这些资源会被直接复制到项目的根目录下，在 HTML 中可以直接通过相对路径引用。src目录：是项目的主要源代码目录，包含了各种组件、样式、业务逻辑代码等。index.html：项目的入口 HTML 文件，Vite 会将其作为开发服务器的入口，并且在构建生产版本时，也会基于此文件进行处理。vite.config.js：Vite 项目的配置文件，在这里可以配置插件、服务器相关选项、构建相关的设置等，用来定制化项目的构建和开发流程。
5. 配置文件（vite.config.js）
下面是一个简单的 vite.config.js 文件示例，用于配置一些基础的功能，比如添加插件、设置服务器端口等：
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [vue()],
server: {
port: 3001, // 设置开发服务器的端口为 3001
},
});
-
plugins字段：用于配置项目需要使用的插件，这里引入了@vitejs/plugin-vue插件来支持 Vue 项目的编译等相关处理，不同的项目框架需要对应的插件支持。 -
server字段：可以对开发服务器进行各种设置，除了端口，还可以配置代理等功能，方便与后端 API 进行联调。例如，设置代理可以这样写：
server: {
port: 3001,
proxy: {
'/api': {
target: 'http://localhost:8080', // 后端 API 地址
changeOrigin: true,
rewrite: (path) => path.replace(/^/api/, ''),
},
},
},
这样，前端项目中以 /api 开头的请求都会被代理到 http://localhost:8080 这个后端服务器地址上。
6. 构建生产版本
当项目开发完成，需要部署到生产环境时，可以使用以下命令构建项目：
npm run build
# 或者
yarn build
Vite 会对项目进行打包、优化等一系列操作，生成可以直接部署到服务器上的静态文件，一般会生成 dist 目录，里面包含了 HTML、CSS、JavaScript 等经过处理后的文件，将这个目录下的内容部署到服务器相应位置即可让网站上线运行。
四、Vite 与不同框架的结合
1. Vue 项目
- 如前面所述，创建 Vue 项目时使用对应的
vue模板即可。在项目中编写 Vue 组件、使用 Vue 的各种特性（如Composition API、Options API等）都和常规的 Vue 开发类似，Vite 会自动处理好相关的编译和优化工作。 - 对于 Vue 的单文件组件（
.vue文件），Vite 借助插件可以很好地解析其中的<template>、<script>和<style>部分，将它们分别编译成对应的 JavaScript、CSS 等代码。
2. React 项目
-
创建 React 项目时选择
react模板，例如：
create-vite my-react-project --template react
- 在 React 项目中，可以正常使用 React 的各种 API（如
useState、useEffect等）来构建组件、处理逻辑。Vite 会确保 React 项目中的 JSX 等语法能够被正确编译和处理，同时也能享受到 Vite 的快速开发和构建优势。
3. 其他框架
除了 Vue 和 React，Vite 也支持 Preact、Svelte 等其他前端框架，使用方式类似，都是通过选择对应的模板来创建项目，然后按照各自框架的开发规范进行代码编写，Vite 会在底层做好适配和构建相关的工作。
五、Vite 的生态与社区
Vite 在前端社区中拥有庞大的生态，有大量的开源插件可供选择，涵盖了从代码风格检查、性能优化到与各种第三方工具集成等方方面面。同时，很多开发者也在不断分享关于 Vite 的使用经验、最佳实践以及各种实际项目中的案例，通过参与社区（如 GitHub 上的 Vite 仓库、相关论坛等）可以及时了解到 Vite 的最新动态、学习他人的优秀做法，进一步提升自己运用 Vite 进行前端开发的能力。
总之，Vite 作为一个强大且高效的前端构建工具，为前端开发带来了诸多便利，值得深入学习和掌握，希望这份笔记能帮助你更好地开启 Vite 的自学之旅呀！
