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 项目中，你可以使用