Vite 学习笔记

介绍

Vite 是一种基于现代浏览器原生 ES 模块的开发工具和构建工具。它旨在提供一种快速、简单的开发体验，尤其适用于 Vue.js 项目。在本篇笔记中，我们将探讨 Vite 的基本概念、特性以及如何使用它进行前端开发。

为什么选择 Vite

Vite 之所以备受欢迎，是因为它具备以下优势：

快速的开发环境：Vite 利用浏览器原生 ES 模块的特性，在开发环境下实现了秒级热更新，极大提升了开发效率。
按需导入：Vite 支持按需导入模块，只会在需要的时候加载相应的模块，减少了不必要的加载，加快了页面加载速度。
Vue.js 支持：Vite 与 Vue.js 紧密结合，可以充分发挥 Vue.js 的优势，并且提供了一些针对 Vue.js 的特殊优化。
插件体系：Vite 使用插件来扩展功能，开发者可以根据项目需求轻松添加或定制插件。

安装与创建项目

要开始使用 Vite，需要先确保安装了 Node.js。然后，可以通过以下步骤创建一个新的 Vite 项目：

全局安装 Vite（当然，你也可以在项目中局部安装）：
```
npm install -g create-vite
```

创建项目：

create-vite my-vite-project
cd my-vite-project

安装依赖：
```
npm install
```

项目结构

一个典型的 Vite 项目结构如下：

my-vite-project/
├── node_modules/
├── public/
│   ├── index.html
│   └── ...
├── src/
│   ├── main.js
│   └── ...
├── .gitignore
├── package.json
├── vite.config.js
└── README.md

public 文件夹：包含公共资源，如 index.html，在构建过程中会直接复制到输出目录。
src 文件夹：存放项目源代码，主要入口文件为 main.js。
vite.config.js：Vite 的配置文件，可以在此文件中自定义构建选项、插件等。

开发与构建

在项目根目录下执行以下命令启动开发服务器：

npm run dev

Vite 会启动一个开发服务器，支持快速的热更新。此外，Vite 会在浏览器中创建一个虚拟的 ES 模块环境，从而提供更快的加载速度。

要构建项目并生成生产环境所需的文件，执行以下命令：

npm run build

Vite 会将构建后的文件输出到默认的 dist 目录中。

插件与定制

Vite 支持各种插件，可以用于添加特定功能、优化性能等。你可以在 vite.config.js 文件中配置插件，例如：

import vue from '@vitejs/plugin-vue';
import myCustomPlugin from './plugins/my-custom-plugin';

export default {
  plugins: [vue(), myCustomPlugin()]
};

总结

Vite 是一个快速、现代的前端开发工具，通过利用浏览器原生 ES 模块的特性，实现了极快的热更新和加载速度。它与 Vue.js 紧密结合，并且支持插件扩展，为前端开发提供了更加愉快的体验。通过本篇笔记，我们初步了解了 Vite 的基本概念、安装、项目结构、开发和构建流程，以及如何配置插件。希望这些内容能够帮助你更好地使用 Vite 开发出高效、优雅的前端应用。

《Vite 学习》笔记 ｜ 青训营