Vite 教程：从入门到实战

Vite 教程：从入门到实战

Vite 是一个现代化的前端构建工具，通过利用现代浏览器的原生 ES 模块支持，提供了快速的开发体验。它解决了传统构建工具如 Webpack 的痛点，具有极速启动、快速热更新等优势。本文将详细介绍 Vite 的基本概念、工作原理以及如何创建和配置 Vite 项目。

Vite 是一个现代化的前端构建工具，旨在通过利用现代浏览器的原生 ES 模块支持，提供快速的开发体验。
Vite 由两部分组成：

开发服务器：基于原生 ES 模块，提供超快的热更新。

构建命令：使用 Rollup 打包代码，生成适用于生产环境的优化静态资源。
Vite 需要 Node.js 版本 18+ 或 20+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。

传统构建工具的痛点

在 Vite 出现之前，前端开发通常使用 Webpack 等构建工具，这些工具虽然功能强大，但也存在一些痛点：

启动速度慢：项目越大，启动时间越长，影响开发效率。

热更新慢：每次修改代码后，都需要重新构建整个项目，导致热更新速度慢。

配置复杂：Webpack 等工具配置复杂，学习成本高。
Vite 的出现解决了传统构建工具的痛点，具有以下优势：

极速启动：利用浏览器原生 ES 模块支持，无需打包，启动速度极快。

快速热更新：仅更新修改的模块，保持应用状态，提升开发效率。

丰富的功能：支持 TypeScript、JSX、CSS 等，开箱即用。

高度可扩展：通过插件系统，轻松集成其他工具和框架。

Vite 的工作原理

Vite 的工作原理可以分为开发模式和生产模式：

开发模式：

Vite 启动一个开发服务器，利用浏览器原生支持 ES 模块的特性，直接加载源代码。

当代码发生变化时，Vite 只会更新修改的模块，并通知浏览器进行热更新，保持应用状态。

生产模式：

Vite 使用 Rollup 打包代码，生成优化后的静态资源文件。

这些文件可以部署到任何静态文件服务器上。

Vite 适用场景

Vite 适用于各种项目，尤其适合：

单页应用 (SPA)：如 Vue、React 项目。

静态网站：快速构建博客、文档等。

库开发：利用 Vite 的构建功能，高效开发和打包库。

创建 Vite 项目

Vite 提供了多种方式来创建新项目，最简单的方式是使用命令行工具。
打开终端或命令行工具，运行以下命令来创建一个新的 Vite 项目：

npm create vite@latest

按照提示输入项目名称并选择模板。
Vite 提供了多种模板，包括：

vanilla:纯 JavaScript 项目

vue:Vue.js 项目

react:React 项目

preact:Preact 项目

lit:Lit 项目

svelte:Svelte 项目
选择模板后，Vite 会自动创建项目目录并安装依赖，本章节我们选择了 Vue 框架。
如果暂时不懂的怎么选择，一路回车也行，窗口输出的信息类似如下：
使用 Vite 创建的项目通常包含以下文件和文件夹：

node_modules:存放项目依赖的文件夹。

public:存放静态资源的文件夹，例如图片、字体等。

src:存放项目源代码的文件夹。

main.js:项目入口文件。

App.vue:Vue 项目根组件。

index.html:项目首页。

package.json:项目配置文件，包含项目信息、依赖和脚本命令。

vite.config.js:Vite 配置文件，用于配置 Vite 的各种选项。

启动开发服务器

进入项目目录：

cd runoob-vite-test

安装依赖：

npm install

运行以下命令启动开发服务器：
npm run dev
执行后，出现如下信息：

VITE v6.2.0 ready in 684 ms
 ➜ Local: http://localhost:5173/
 ➜ Network: use --host to expose
 ➜ Vue DevTools: Open http://localhost:5173/__devtools__/ as a separate window
 ➜ Vue DevTools: Press Option(⌥)+Shift(⇧)+D in App to toggle the Vue DevTools
 ➜ press h + enter to show help

Vite 会启动一个本地开发服务器，并打印出访问地址，例如http://localhost:5173，端口可以在 vite.config.js 中配置修改。
打开浏览器访问该地址，即可看到你的 Vite 项目。

修改代码并查看效果

打开 src/App.vue 文件，修改代码并保存文件。
你会发现浏览器会自动刷新，并显示修改后的效果。

Vite 常用功能

Vite 提供了丰富的功能，可以帮助你更高效地开发前端应用。

1. 使用 CSS 预处理器

Vite 支持使用 Sass、Less、Stylus 等 CSS 预处理器。
要使用这些预处理器，你需要先安装相应的依赖：
Sass:

npm install -D sass

Less:

npm install -D less

Stylus:

npm install -D stylus

安装完成后，你就可以在项目中使用相应的 CSS 预处理器了。
例如，在 Vue 项目中，你可以使用