第七章：框架支持——与 Vue、React、Svelte 的结合

在前几章中，我们已经了解了 Vite 的基础配置、开发服务器、模块化机制以及插件系统。本章将探讨 Vite 如何与多种前端框架结合使用，特别是 Vue、React 和 Svelte。

使用 Vite 构建 Vue 项目

初始化 Vue 项目

Vite 提供了一个简单的命令行工具，可以帮助我们快速初始化一个 Vue 项目：

npm init vite@latest my-vue-app --template vue
cd my-vue-app
npm install

配置 Vue 插件

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

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// 配置 Vue 插件
export default defineConfig({
  plugins: [vue()]
})

创建 Vue 组件

接下来，我们可以创建一个简单的 Vue 组件：

<!-- src/components/HelloWorld.vue -->
<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vite with Vue!'
    }
  }
}
</script>

使用 Vue 组件

在 main.js 中使用这个组件：

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

使用 Vite 构建 React 项目

初始化 React 项目

Vite 同样支持快速初始化 React 项目：

npm init vite@latest my-react-app --template react
cd my-react-app
npm install

配置 React 插件

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

// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// 配置 React 插件
export default defineConfig({
  plugins: [react()]
})

创建 React 组件

接下来，我们可以创建一个简单的 React 组件：

// src/components/HelloWorld.jsx
import React from 'react'

function HelloWorld() {
  const [message, setMessage] = React.useState('Hello Vite with React!')

  return (
    <div>
      <h1>{message}</h1>
      <button onClick={() => setMessage('Hello Vite with React and HMR!')}>Click Me</button>
    </div>
  )
}

export default HelloWorld

使用 React 组件

在 main.jsx 中使用这个组件：

// src/main.jsx
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

ReactDOM.render(<App />, document.getElementById('app'))

使用 Vite 构建 Svelte 项目

初始化 Svelte 项目

Vite 也支持快速初始化 Svelte 项目：

npm init vite@latest my-svelte-app --template svelte
cd my-svelte-app
npm install

配置 Svelte 插件

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

// vite.config.js
import { defineConfig } from 'vite'
import svelte from '@sveltejs/vite-plugin-svelte'

// 配置 Svelte 插件
export default defineConfig({
  plugins: [svelte()]
})

创建 Svelte 组件

接下来，我们可以创建一个简单的 Svelte 组件：

<!-- src/components/HelloWorld.svelte -->
<script>
  let message = 'Hello Vite with Svelte!'
</script>

<div>
  <h1>{message}</h1>
  <button on:click={() => message = 'Hello Vite with Svelte and HMR!'}>Click Me</button>
</div>

<style>
  h1 {
    color: purple;
  }
</style>

使用 Svelte 组件