快速上手

本章带你在几分钟内创建并运行第一个 Svelte 5 项目。

前置要求

• Node.js 18 或更高版本（推荐 20+）
• 一个代码编辑器（推荐 VS Code + Svelte 插件，见编辑器与工具）

检查你的 Node 版本：

node -v   # 应显示 v18.x 或更高

方式一：使用官方 sv CLI（推荐）

Svelte 5 引入了全新的命令行工具 sv。用它创建一个 SvelteKit 项目：

npx sv create my-app
cd my-app
npm install
npm run dev

sv create 会交互式地问你几个问题（模板类型、是否加 TypeScript、是否加 ESLint/Prettier 等）。跟着选择即可，得到的项目默认就是 Svelte 5 + Runes 模式。

TIP

sv 是取代旧版 npx degit sveltejs/template 和 npm init svelte 的新工具。SvelteKit 项目统一用它。

方式二：使用 Vite（纯 Svelte，不带 Kit）

如果你只想要一个轻量的 Svelte 前端（不需要 SvelteKit 的路由/SSR），用 Vite 最快：

# JavaScript 版本
npm create vite@latest my-app -- --template svelte

# 或 TypeScript 版本
npm create vite@latest my-app -- --template svelte-ts

cd my-app
npm install
npm run dev

打开终端提示的地址（通常是 http://localhost:5173）即可看到页面。

确认用的是 Svelte 5

进入项目后，检查 package.json，确认 svelte 是 5.x：

npm ls svelte

你应该看到类似：

my-app@0.0.1 /path/to/my-app
└── svelte@5.57.0

本教程全程使用 Svelte 5.57.0（当前 latest）。如果版本号低于 5，用下面的命令升级：

npm install svelte@latest

第一个组件

在 src/ 下新建 Counter.svelte，写入：

<script>
  let count = $state(0);

  function increment() {
    count += 1;
  }
</script>

<button onclick={increment}>
  点击了 {count} 次
</button>

然后在主组件（Vite 模板里是 App.svelte，Kit 里是 +page.svelte）中引入并使用它：

<script>
  import Counter from './Counter.svelte';
</script>

<h1>你好，Svelte 5！</h1>
<Counter />

保存后浏览器会热更新，点击按钮，数字就会变化。这个组件用到了两个 Svelte 5 的核心语法：

• $state(0) —— 声明一个响应式状态
• onclick={...} —— 事件处理属性（注意是全小写，不再是 on:click）

本站首页的那个计数器就是活的，可以直接玩：

计数器 · $stateSvelte 5 · Live

项目结构（Vite 模板）

my-app/
├─ public/          # 静态资源，原样拷贝
├─ src/
│  ├─ lib/          # 你自己的组件/模块
│  ├─ App.svelte    # 根组件
│  └─ main.js       # 入口：把 App 挂载到 DOM
├─ index.html
├─ svelte.config.js # Svelte 编译配置
└─ vite.config.js   # Vite 配置

main.js 在 Svelte 5 里用的是新的 mount API：

import { mount } from 'svelte';
import './app.css';
import App from './App.svelte';

const app = mount(App, {
  target: document.getElementById('app')
});

export default app;

注意

Svelte 5 用 mount() / unmount()（来自 svelte 包）取代了旧的 new App({ target }) 写法。如果你看到旧教程用 new Component(...)，那是 Svelte 4 及更早的 API。

下一步

• 深入理解响应式：$state 状态
• 了解开发环境配置：编辑器与工具