Vite 多种前端框架的构建Vite 是一个快速的前端构建工具，最初是为 Vue 设计的，但现在已经支持多种前端框架的构建。它通过强大的插件系统可以支持现代流行的框架，如 React、Vue、Svelte、Preact、Lit 等。
下面我会展示 Vite 支持的一些常见前端框架的构建，并对比其使用示例。
- Vue 3 项目构建
Vite 最初是为 Vue 3 设计的，因此对 Vue 支持非常完善。
初始化 Vue 3 项目
pnpm create vite my-vue-app --template vue
1
或者使用 npm：
npm init @vitejs/app my-vue-app --template vue
1
主要配置示例
vite.config.js 中默认会自动集成 Vue 的插件：
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [vue()],
});
1
2
3
4
5
6
Vue 3 示例代码
1 2 3 4 5 6 7 8 9 2. React 项目构建 Vite 对 React 的支持也非常成熟，官方提供了 React 的插件。 初始化 React 项目 pnpm create vite my-react-app --template react 1 或者使用 npm： npm init @vitejs/app my-react-app --template react 1 主要配置示例 vite.config.js 会自动引入 React 插件： import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; export default defineConfig({ plugins: [react()], }); 1 2 3 4 5 6 React 示例代码 import { useState } from 'react'; function App() { const [message, setMessage] = useState('Hello React with Vite!'); return
{message}
1
2
3
4
5
6
7
- Preact 项目构建
Preact 是一个轻量级的 React 替代品，Vite 支持通过 @preact/preset-vite 插件来构建 Preact 项目。
初始化 Preact 项目
pnpm create vite my-preact-app --template preact
1
或者使用 npm：
npm init @vitejs/app my-preact-app --template preact
1
主要配置示例
vite.config.js 配置 Preact 插件：
import { defineConfig } from 'vite';
import preact from '@preact/preset-vite';
export default defineConfig({
plugins: [preact()],
});
1
2
3
4
5
6
Preact 示例代码
import { useState } from 'preact/hooks';
function App() {
const [message, setMessage] = useState('Hello Preact with Vite!');
return
}
export default App;
1
2
3
4
5
6
7
8
9
- Lit 项目构建
Lit 是用于构建 Web Components 的库，Vite 可以通过简单的配置支持它。
初始化 Lit 项目
pnpm create vite my-lit-app --template vanilla
1
或者使用 npm：
npm init @vitejs/app my-lit-app --template vanilla
1
主要配置示例
不需要额外的插件，Vite 默认支持构建。
vite.config.js：
import { defineConfig } from 'vite';
export default defineConfig({});
1
2
3
Lit 示例代码
import { LitElement, html, css } from 'lit';
class MyComponent extends LitElement {
static styles = cssdiv { color: blue; };
render() {
return html<div>Hello Lit with Vite!</div>;
}
}
customElements.define('my-component', MyComponent);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
- Vanilla JavaScript 项目构建
Vite 对原生 JavaScript 项目的支持也是极其简单的，适合没有框架的轻量应用。
初始化 Vanilla 项目
pnpm create vite my-vanilla-app --template vanilla
1
或者使用 npm：
npm init @vitejs/app my-vanilla-app --template vanilla
1
主要配置示例
不需要插件，默认支持。
vite.config.js：
import { defineConfig } from 'vite';
export default defineConfig({});
1
2
3
Vanilla 示例代码
document.getElementById('app').innerHTML = <h1>Hello Vanilla JS with Vite!</h1>;
1
- 对比使用示例
框架 初始化命令 Vite 插件 示例代码 (展示 “Hello World”)
Vue pnpm create vite my-vue-app --template vue @vitejs/plugin-vue { { message }}
React pnpm create vite my-react-app --template react @vitejs/plugin-react const [message, setMessage] = useState('Hello React!'); return{message}
Svelte pnpm create vite my-svelte-app --template svelte @sveltejs/vite-plugin-svelte{message}
Preact pnpm create vite my-preact-app --template preact @preact/preset-vite const [message, setMessage] = useState('Hello Preact!'); return{message}
Lit pnpm create vite my-lit-app --template vanilla 无需插件 class MyComponent extends LitElement { render() { return html\
Hello Lit!}}
Vanilla JS pnpm create vite my-vanilla-app --template vanilla 无需插件 document.getElementById('app').innerHTML = 'Hello Vanilla JS!
';
总结
Vite 支持多种前端框架构建，包括 Vue、React、Svelte、Preact、Lit 等。不同的框架通过简单的配置即可使用 Vite 高效地进行开发。Vite 的插件生态可以很好地支持每种框架，并提供极致的开发体验和快速的热重载能力。在对比中可以看到，使用 Vite 各框架的配置和开发流程都非常简洁高效。
