Vite 使用学习指南
Vite 的基本概念和特点
Vite 是什么，它的主要特点是什么
Vite 是一个基于 ES modules 的前端构建工具，它的主要特点包括：
-
快速的冷启动：Vite 采用了基于浏览器原生 ES 模块的开发模式，可以在开发时快速启动应用，减少了冷启动时间。
-
按需编译：Vite 可以根据需要动态地编译模块，而不是像传统的打包工具一样将所有模块都打包到一个文件中。
-
热更新：Vite 支持热更新，可以在开发时实时更新修改后的代码，提高开发效率。
-
插件化：Vite 支持插件化，可以通过插件扩展 Vite 的功能。
-
支持多种前端框架：Vite 支持多种前端框架，包括 Vue、React、Angular 等。
Vite 和传统的打包工具（如 webpack）有什么不同
Vite 和传统的打包工具（如 webpack）有以下不同点：
-
构建方式不同：Vite 采用了基于浏览器原生 ES 模块的开发模式，可以在开发时快速启动应用，减少了冷启动时间，而 webpack 则是将所有模块打包到一个文件中。
-
编译方式不同：Vite 可以根据需要动态地编译模块，而不是像 webpack 一样将所有模块都打包到一个文件中。
-
热更新方式不同：Vite 支持热更新，可以在开发时实时更新修改后的代码，而 webpack 则需要重新编译整个应用才能看到修改后的效果。
-
插件化方式不同：Vite 支持插件化，可以通过插件扩展 Vite 的功能，而 webpack 则需要通过 loader 和 plugin 扩展其功能。
-
支持的框架不同：Vite 支持多种前端框架，包括 Vue、React、Angular 等，而 webpack 则需要通过相应的 loader 和 plugin 来支持不同的框架。
总之，Vite 和 webpack 在构建方式、编译方式、热更新方式、插件化方式和支持的框架等方面都有所不同。Vite 更加轻量、快速、灵活，适合于开发小型应用和组件库，而 webpack 则更加适合于大型应用的构建和优化。
安装和配置 Vite
安装 Vite 可以通过 npm 或 yarn 进行安装。具体步骤如下：
-
打开终端或命令行工具，进入项目目录。
-
使用以下命令安装 Vite：
-
使用 npm 安装：npm install vite
-
使用 yarn 安装：yarn add vite
-
-
安装完成后，可以在 package.json 文件中查看 Vite 的版本信息。
注意：在安装 Vite 之前，需要确保已经安装了 Node.js 和 npm 或 yarn。
配置 Vite 的基本选项
vite.config.js 是 Vite 的配置文件，可以用来配置 Vite 的各种选项。以下是 vite.config.js 中可以配置的所有选项：
-
root：指定项目根目录，默认为当前工作目录。
-
base：指定应用部署的基础路径，默认为 /。
-
mode：指定应用的模式，可以是 development 或 production，默认为 development。
-
server：配置开发服务器的选项，例如端口号、代理等。
-
build：配置构建选项，例如输出目录、是否压缩代码等。
-
plugins：配置使用的插件。
-
resolve：配置模块解析选项，例如别名、扩展名等。
-
css：配置 CSS 相关选项，例如是否提取 CSS、是否压缩 CSS 等。
-
optimizeDeps：配置依赖优化选项，例如是否预构建依赖、是否忽略某些依赖等。
-
define：配置全局变量，可以在代码中使用。
-
esbuild：配置 esbuild 的选项，例如是否启用 JSX、是否启用 TypeScript 等。
-
alias：配置模块别名，可以简化模块路径。
-
logLevel：配置日志级别，可以控制日志输出的详细程度。
-
clearScreen：配置是否在每次构建前清空控制台输出。
-
emitAssets：配置是否输出构建产物。
-
rollupInputOptions：配置 Rollup 的输入选项。
-
rollupOutputOptions：配置 Rollup 的输出选项。
以上是 vite.config.js 中可以配置的所有选项，具体的使用方法可以参考 Vite 的官方文档。
使用 Vite 开发 Vue 应用
- 首先，安装 Vue CLI 和 Vite：
npm install -g @vue/cli
npm install -g vite
- 创建一个新的 Vue 项目：
vue create my-vue-app
- 进入项目目录并安装 Vite 插件：
cd my-vue-app
npm install --save-dev vite
- 修改
package.json文件，添加以下脚本：
"scripts": {
"dev": "vite",
"build": "vite build"
}
- 创建一个新的 Vue 组件：
{{ message }}
- 在
main.js文件中引入该组件并挂载到 DOM 上：
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
- 运行项目：
npm run dev
- 打开浏览器并访问
http://localhost:3000，即可看到页面上显示的 “Hello, World!”。
使用 Vite 开发 React 应用
- 安装 Node.js 和 npm
首先需要安装 Node.js 和 npm，可以在官网下载安装包进行安装。
- 创建 React 应用
使用 create-react-app 命令创建 React 应用：
npx create-react-app my-app
- 安装 Vite
在项目根目录下执行以下命令安装 Vite：
npm install vite --save-dev
- 修改 package.json
在 package.json 文件中添加以下代码：
"scripts": {
"start": "vite",
"build": "vite build"
}
- 修改 index.html
将 index.html 文件中的 script 标签修改为以下代码：
<script type="module" src="/src/index.js">script>
- 创建 src/index.js
在 src 目录下创建 index.js 文件，并添加以下代码：
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
- 运行应用
执行以下命令启动应用：
npm start
- 构建应用
执行以下命令构建应用：
npm run build
Vite 的高级用法
插件开发：Vite 提供了丰富的插件 API，可以通过编写插件来扩展 Vite 的功能，例如添加自定义的文件类型、自定义处理器、自定义中间件等。
自定义配置：Vite 的默认配置已经足够满足大部分项目的需求，但是对于一些特殊的需求，可以通过自定义配置来满足。例如，可以通过配置 alias 来简化模块的引入路径，可以通过配置 optimizeDeps 来优化依赖的打包方式等。
HMR（热更新）：Vite 内置了 HMR 功能，可以在开发过程中实现快速的热更新，而不需要刷新整个页面。在开发过程中，只需要修改代码，保存后即可看到修改后的效果，非常方便。
生产环境构建：Vite 不仅可以用于开发环境，还可以用于生产环境构建。在生产环境中，Vite 会自动进行代码压缩、混淆、分割等优化，以提高页面加载速度和性能。
vite 插件开发
- 创建一个vite实例：
import { createServer } from 'vite';
const server = await createServer({
// 配置项
});
- 获取vite实例的配置项：
const config = server.config;
- 获取vite实例的插件列表：
const plugins = server.plugins;
- 注册一个自定义插件：
server.config.plugins.push(myPlugin);
- 获取vite实例的中间件列表：
const middlewares = server.middlewares;
- 注册一个自定义中间件：
server.middlewares.use(myMiddleware);
- 构建项目：
import { build } from 'vite';
const result = await build({
// 配置项
});
配置别名
- 在项目根目录下创建一个
vite.config.js文件。 - 在该文件中，使用
defineConfig函数来定义Vite的配置选项。 - 在配置选项中，使用
alias属性来配置别名。例如：
import { defineConfig } from 'vite';
export default defineConfig({
alias: {
'@': '/src',
'components': '/src/components',
'utils': '/src/utils',
},
});
上述代码中，我们定义了三个别名：@代表项目根目录下的/src目录，components代表/src/components目录，utils代表/src/utils目录。
- 在代码中使用别名。例如：
import MyComponent from '@/components/MyComponent';
import { formatDate } from 'utils/dateUtils';
上述代码中，我们使用了@别名来代表/src目录，使用components别名来代表/src/components目录，使用utils别名来代表/src/utils目录。