Vite 框架集成：React、Vue、Svelte、Solid 与官方插件生态

React：JSX/TSX → 浏览器可执行 + react-refresh（保留 Hook 状态）
Vue：  .vue SFC（template/script/style）→ 编译为 JS + 组件级 HMR
Svelte：.svelte → 编译期响应式 JS（运行时零依赖）
Solid： JSX → 编译期细粒度响应式

# React
npm create vite@latest my-app -- --template react
npm create vite@latest my-app -- --template react-ts
# Vue
npm create vite@latest my-app -- --template vue
npm create vite@latest my-app -- --template vue-ts
# Svelte / Solid / Preact / Lit / vanilla
npm create vite@latest my-app -- --template svelte
npm create vite@latest my-app -- --template solid

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

export default defineConfig({
  plugins: [react()],
})

// ✅ 默认 JSX runtime（vite 自动处理）
export function App() { return <h1>Hi</h1> }

// Fast Refresh 限制
export const Comp = () => ...      // 导出组件必须大写开头
export default App                  // 只导出组件（非组件导出会降级全量刷新）

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "types": ["vite/client"]
  }
}

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

export default defineConfig({
  plugins: [vue()],
})

<template>…</template>   → 编译为渲染函数
<script setup>…</script> → 编译为组件逻辑（setup 语法糖）
<style scoped>…</style>  → scoped 样式 + CSS 热更

// vue 插件已预设 @ → src
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  // 需要 scss？
  css: { preprocessorOptions: { scss: { additionalData: '@use "@/styles/vars" as *;' } } },
})

npm i -D @sveltejs/vite-plugin-svelte

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

export default defineConfig({
  plugins: [svelte()],
})

<script>
  let count = 0
  $: doubled = count * 2        // 响应式声明
  function inc() { count++ }
</script>

<button on:click={inc}>count = {count}（翻倍 {doubled}）</button>

npm i -D vite-plugin-solid

// vite.config.ts
import { defineConfig } from 'vite'
import solid from 'vite-plugin-solid'

export default defineConfig({
  plugins: [solid()],
})

import { createSignal } from 'solid-js'

function Counter() {
  const [count, setCount] = createSignal(0)
  return <button onClick={() => setCount(c => c + 1)}>{count()}</button>
}

# 1. 初始化
npm init -y
npm i -D vite @vitejs/plugin-react
npm i react react-dom

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

export default defineConfig({
  plugins: [react()],
})

<!-- 3. index.html（Vite 入口） -->
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>

// 4. src/main.tsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode><App /></React.StrictMode>,
)

// 5. package.json scripts
{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

// vite.config.ts 多框架插件共存
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [react(), vue()],
})

框架语法（JSX/SFC/svelte）→ 必须框架插件
工程能力（压缩/PWA/旧浏览器）→ 通用插件即可
同名插件冲突 → 只装一个框架插件