一、前言

Vite 是一个新一代的前端构建工具，它以速度快、开发体验好为特点，广受前端开发者的欢迎。Vite 的核心理念是基于原生 ES 模块的开发，通过利用浏览器原生的 ES 模块加载机制，实现了快速的冷启动和热模块替换。

二、安装与配置

安装 Vite：使用 npm 或 yarn 安装 Vite 到项目中。

npm install vite --save-dev

配置文件：Vite 使用 vite.config.js 文件来配置构建和开发选项。

// vite.config.js
export default {
  // 配置项
};

三、开发流程

创建项目：使用 Vite 创建一个新项目。

npx create-vite@latest my-vite-app

运行开发服务器：使用 vite 命令启动开发服务器。

vite

开发环境：Vite 支持热模块替换（HMR），在修改文件后会自动更新页面。
生产构建：使用 vite build 命令进行生产构建。

vite build

四、开发 Vue 项目

Vite 支持 Vue.js 3 开发，使用 @vitejs/plugin-vue 插件。
安装插件：使用 npm 或 yarn 安装 Vue 插件。

npm install @vitejs/plugin-vue --save-dev

配置插件：在 vite.config.js 中配置插件。

// vite.config.js
import Vue from '@vitejs/plugin-vue';

export default {
  plugins: [Vue()]
};

创建 Vue 组件：在 .vue 文件中编写 Vue 组件。

<template>
  <div>
    <h1>Hello, Vite + Vue!</h1>
  </div>
</template>

<script>
export default {
  name: 'App'
};
</script>

运行开发服务器：使用 vite 命令启动开发服务器。

vite

五、插件扩展

Vite 支持使用插件来扩展功能，插件可以用于处理样式、压缩代码、优化图片等。
安装插件：使用 npm 或 yarn 安装插件。

npm install vite-plugin-example --save-dev

配置插件：在 vite.config.js 中配置插件。

// vite.config.js
import ExamplePlugin from 'vite-plugin-example';

export default {
  plugins: [ExamplePlugin()]
};

使用插件：插件会根据配置对应的功能。

六、总结

Vite 是一个高效、快速的前端构建工具，通过原生 ES 模块的加载机制，实现了快速的开发和热模块替换。本课程笔记介绍了 Vite 的安装、配置、开发流程以及如何开发 Vue 项目。同时，我们还了解了如何使用插件来扩展 Vite 的功能。通过深入学习 Vite，我们可以在前端开发中提升开发效率，构建出高性能、优质的应用程序。在实际项目中，合理运用 Vite 的各种特性和工具，可以更好地满足项目需求，提供更好的用户体验。

Vite 知识体系 | 青训营