Vite 多种前端框架的构建

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 各框架的配置和开发流程都非常简洁高效。