Svelte 技术栈概览

Svelte 是由 Rich Harris 创建的新一代编译器优先前端框架。不同于 Vue/React 使用虚拟 DOM 运行时，Svelte 在构建阶段将组件编译为高效的纯 JavaScript，运行时几近零开销。

解决什么问题

• 消失的框架：编译后无框架运行时，产物体积极小
• 无需虚拟 DOM：编译期直接生成精确的 DOM 更新代码，性能更好
• 极简语法：.svelte 文件 = script + HTML模板 + style，学习曲线最低
• 真正响应式：$: 标签声明响应式语句，赋值即触发更新，无需 useState/ref

关键特性

• 编译器魔法：{#if} / {#each} / {#await} 模板语法，编译为原生 JS
• Scoped CSS：组件样式自动隔离，无需 CSS Modules
• Stores：内置轻量状态管理，$store 自动订阅/取消订阅
• SvelteKit：官方全栈元框架，文件路由 + SSR + API Routes
• Motion & Transition：内置动画/过渡模块，声明式交互动效
• 2023 开发者最喜爱：Stack Overflow 调查多项第一

毕设场景

• 追求新颖/答辩加分的选择
• 轻量级工具/Dashboard（SvelteKit + Tailwind）
• IoT 嵌入式前端（体积极致小）
• 互动数据可视化（内置动画能力）

Svelte 安装指南

1. 环境准备

• Node.js：>= 18.x
• 包管理器：npm / pnpm
• IDE：VS Code + Svelte for VS Code 插件
• 浏览器：Chrome/Edge（无需额外扩展）

2. 安装命令

方式一：SvelteKit（推荐，全栈）

# npm
npx sv create my-svelte-app
# 交互式选择：SvelteKit / TypeScript / Prettier / ESLint...

# pnpm
pnpm create svelte@latest my-svelte-app

cd my-svelte-app
npm install
npm run dev
# → http://localhost:5173

方式二：纯 Svelte（Vite）

npm create vite@latest my-svelte-app -- --template svelte-ts
cd my-svelte-app
npm install
npm run dev

方式三：REPL 在线体验

访问 https://svelte.dev/playground 直接在浏览器写 Svelte

3. 常见安装问题

Q: npx sv create 无法运行？
A: Node.js >= 18；或者用旧命令 npm create svelte@latest

Q: .svelte 文件 VSCode 不高亮？
A: 安装 Svelte for VS Code 插件；重启 VSCode

Q: SvelteKit vs 纯 Svelte？
A: 毕设推荐 SvelteKit（内置路由 + SSR + 全栈能力），纯 Svelte 适用于组件库或嵌入场景

Svelte 响应式计数器

目标

体验 Svelte 的"赋值即响应"魔法 —— 无需 useState/ref，直接 let count = 0 + count += 1。

完整代码

src/routes/+page.svelte（SvelteKit）

<script>
  let count = 0
  let name = ''

  // Svelte 响应式声明: $: 后面表达式自动追踪依赖
  $: doubled = count * 2
  $: greeting = name ? `你好, ${name}!` : '请输入你的名字'

  function reset() {
    count = 0
    name = ''
  }
</script>

<div class="container">
  <h1>🟠 Svelte 入门</h1>

  <!-- 计数器 -->
  <section class="card">
    <h2>计数器</h2>
    <p class="count">{count}</p>
    <p class="hint">两倍值: {doubled}</p>
    <div class="buttons">
      <button on:click={() => count -= 1}>-1</button>
      <button on:click={reset}>重置</button>
      <button on:click={() => count += 1}>+1</button>
    </div>
  </section>

  <!-- 响应式输入 -->
  <section class="card">
    <h2>响应式输入</h2>
    <input
      type="text"
      bind:value={name}
      placeholder="输入名字..."
      class="input"
    />
    <p class="greeting">{greeting}</p>
  </section>

  <!-- 条件渲染 -->
  <section class="card">
    <h2>条件与循环</h2>
    {#if count > 10}
      <p class="warn">🔥 计数值很大了！</p>
    {:else if count < -5}
      <p class="warn">❄️ 计数值很小...</p>
    {:else}
      <p>计数值在正常范围</p>
    {/if}
  </section>
</div>

<style>
  .container { max-width: 400px; margin: 2rem auto; font-family: system-ui; }
  h1 { color: #ff3e00; }
  .card { border: 1px solid #e5e7eb; border-radius: 12px; padding: 20px; margin-bottom: 16px; }
  .count { font-size: 3rem; font-weight: bold; margin: 0.5rem 0; }
  .hint { color: #94a3b8; }
  .buttons { display: flex; gap: 8px; }
  button { padding: 8px 16px; background: #ff3e00; color: white; border: none; border-radius: 6px; cursor: pointer; }
  .input { width: 100%; padding: 8px 12px; border: 2px solid #e2e8f0; border-radius: 8px; font-size: 1rem; box-sizing: border-box; }
  .greeting { font-size: 1.2rem; margin-top: 8px; }
  .warn { color: #f59e0b; font-weight: bold; }
</style>

运行

npm install &;& npm run dev
# → http://localhost:5173

预期输出

• 点击按钮 count 变化，doubled 自动更新
• 输入名字，问候语实时响应
• 计数 >10 或 <-5 时条件渲染提示

Svelte 快速上手

背景

Svelte 是新兴前端框架，不同于 Vue/React 的虚拟 DOM 运行时，它在编译阶段将模板编译为纯 JavaScript，运行时体积几乎为零。Stack Overflow 2023 开发者调查中被评为最受喜爱的 Web 框架。

核心概念

1. "赋值即响应"

Svelte 最大卖点：无需 useState / ref / setState，直接给变量赋值就触发更新。

<script>
  let count = 0
  function increment() { count += 1 }  // ← 就这么简单！
</script>

<p>{count}</p>
<button on:click={increment}>+1</button>

2. 响应式声明 $:

<script>
  let count = 0
  $: doubled = count * 2        // ← 自动追踪 count，变化时重新计算
  $: console.log(`count = ${count}`)  // ← 副作用也可以用 $:
  $: if (count > 10) alert('超过10了!')
</script>

3. 模板语法

<!-- 条件渲染 -->
{#if count > 10}
  <p>很多!</p>
{:else if count > 5}
  <p>还行</p>
{:else}
  <p>不多</p>
{/if}

<!-- 循环 -->
{#each items as item (item.id)}
  <li>{item.name}</li>
{/each}

<!-- 异步等待 -->
{#await promise}
  <p>加载中...</p>
{:then data}
  <p>{data}</p>
{:catch error}
  <p>出错了: {error.message}</p>
{/await}

4. Stores（状态管理）

// stores.js
import { writable } from 'svelte/store'
export const count = writable(0)

<script>
  import { count } from './stores.js'
  // $前缀自动订阅，销毁时自动取消
  $: doubled = $count * 2
</script>

<p>{$count} x 2 = {doubled}</p>
<button on:click={() => $count += 1}>+1</button>

5. SvelteKit 路由

src/routes/
  +page.svelte          → /
  +layout.svelte        → 全局布局
  about/+page.svelte    → /about
  blog/[slug]/+page.svelte → /blog/:slug
  +page.server.ts       → 服务端 load 函数
  +server.ts            → API 端点

分步操作：SvelteKit 毕设

npx sv create grad-project
cd grad-project
npm install
npm run dev

思考题

1. Svelte 的 $: 语法和 Vue 的 computed 有何异同？
2. 为什么 Svelte 可以不用虚拟 DOM？优缺点是什么？
3. SvelteKit 的 +page.server.ts 和 +server.ts 有什么区别？

毕设场景

• 追求新颖、答辩加分的项目
• 轻量级工具（打包体积 < 5KB）
• 嵌入式前端（如树莓派 Web 界面）