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