Vite 多框架快速启动

目标

展示 Vite 的模板系统 —— 同一命令创建 Vue/React/Svelte 项目，演示秒级冷启动和 HMR 热更新。

操作步骤

1. 创建三个项目

# Vue 项目
npm create vite@latest vite-vue -- --template vue-ts
cd vite-vue &;& npm install && cd ..

# React 项目
npm create vite@latest vite-react -- --template react-ts
cd vite-react &;& npm install && cd ..

# Svelte 项目
npm create vite@latest vite-svelte -- --template svelte-ts
cd vite-svelte &;& npm install && cd ..

2. 各项目入口代码

vite-vue/src/App.vue

<script setup lang="ts">
import { ref } from 'vue'
const count = ref(0)
</script>

<template>
  <div style="text-align:center;padding:2rem;font-family:system-ui">
    <h1 style="color:#42b883">⚡ Vite + Vue 3</h1>
    <p style="font-size:3rem;font-weight:bold">{{ count }}</p>
    <button @click="count++" style="padding:8px 20px;background:#42b883;color:white;border:none;border-radius:6px;cursor:pointer">
      点击 +1
    </button>
  </div>
</template>

vite-react/src/App.tsx

import { useState } from 'react'

export default function App() {
  const [count, setCount] = useState(0)
  return (
    <div style={{ textAlign: 'center', padding: '2rem', fontFamily: 'system-ui' }}>
      <h1 style={{ color: '#61dafb' }}>⚡ Vite + React</h1>
      <p style={{ fontSize: '3rem', fontWeight: 'bold' }}>{count}</p>
      <button onClick={() => setCount(c => c + 1)}
        style={{ padding: '8px 20px', background: '#61dafb', color: '#000', border: 'none', borderRadius: 6, cursor: 'pointer' }}>
        点击 +1
      </button>
    </div>
  )
}

vite-svelte/src/App.svelte

<script lang="ts">
  let count = 0
</script>

<div style="text-align:center;padding:2rem;font-family:system-ui">
  <h1 style="color:#ff3e00">⚡ Vite + Svelte</h1>
  <p style="font-size:3rem;font-weight:bold">{count}</p>
  <button on:click={() => count += 1}
    style="padding:8px 20px;background:#ff3e00;color:white;border:none;border-radius:6px;cursor:pointer">
    点击 +1
  </button>
</div>

3. 启动体验

# 分别在三个目录运行
npm run dev

# 观察：
# - 冷启动 < 1s（Webpack 需要 10-30s）
# - 修改代码后 HMR < 100ms
# - 三个框架统一命令、统一端口

预期输出

框架	URL	冷启动	HMR
Vue 3	localhost:5173	< 1s	< 100ms
React	localhost:5174	< 1s	< 100ms
Svelte	localhost:5175	< 1s	< 100ms

Vite 真正实现了框架无关的极速开发体验。