要点

这条路线面向想把 Svelte 学到”能独立做出全栈小应用”的人，共五个阶段，按每天 1-2 小时业余时间口径约一个月走完。它本身就是一条”串站内文章的线”：每个阶段的资源优先指向本站 Svelte 系列（开山篇、路由与数据加载、参考字典、Markdown 片段收藏夹实战），站内没有的才引官方资源。每个阶段都有明确的”做出什么”和验收标准，不了解 xx 不是合格产出，跑起来的小东西才是。

这张路线适合谁

前置知识一句话说死：会 HTML/CSS，会现代 JavaScript（const/let、箭头函数、解构、数组方法），并且真正写过 async/await 与 ES 模块的 import/export——不会的话先补这三篇再回来：Node.js 环境搭建与工具链（你需要 Node 跑构建链）、Node.js 模块与 ESM、Node.js 异步与 Promise。Svelte 的组件语法看着像 HTML，但响应式与模块系统全是 JS 功底的直接映射，前置不牢的阶段一就会卡住。会 React 或 Vue 不必”先卸载心智”，但要知道对照会误导：runes 不是 hooks，本路线阶段一会专门拆这个。

总览

阶段 0：前置，不写一行 Svelte

学什么：ESM 的导入导出与模块解析；Promise 与 async/await 的错误传播（try/catch 何时生效）；数组 map/filter/sort 的不可变用法——runes 的派生值大量依赖”返回新数组”的习惯。产出验收：命令行待办清单支持增删、列出、存取 JSON 文件，异常退出后数据不丢。卡点：回调与 Promise 混写导致时序混乱——统一 async/await 一种写法，异步与 Promise 一篇够用。

阶段 1：组件与 runes

学什么（具体到知识点）：$state 的原始值与深层代理、$derived/$derived.by、$effect 及其清理函数、$props 与 $bindable；模板层 {#if}、带 key 的 {#each}、{#await}、bind:value/bind:this、onclick 事件属性、{#snippet} 与 {@render}。资源：先用开山篇建立编译时框架的心智，再走官方 tutorial（svelte.dev/tutorial，选 Svelte 5 版本），条目查证用参考字典。产出：番茄钟计时器——倒计时状态、进度条派生值、完成后触发副作用（响一声或改标题），正好各用一次 $state/$derived/$effect。验收：计时进行中刷新组件树不串值；用 key 的列表重排后输入框不丢内容。卡点：把 $effect 当 computed 用，更新循环警告刷屏——能算出来的值一律 $derived；网上教程混杂 Svelte 4 的 $: 与 on:click——看到这两个符号就换资料，认准文档的 runes 模式。

阶段 2：SvelteKit 路由与数据

学什么：src/routes 文件树、动态段 [slug] 与匹配器、+layout 嵌套与分组、universal load 与 server load 的分工、event.fetch、load 重跑规则、+error.svelte 层级兜底。资源：路由与数据加载详解一篇覆盖主线，官方 docs/kit 的 load 与 routing 章节当手册查。产出：三页小站——文章列表（+page.server.js 取数）、动态段详情（[slug] + 不存在的 slug 返回 404 错误页）、关于页（同一布局）。验收：列表跳详情无整页刷新；直接粘贴不存在的详情 URL 看到的是错误页而非白屏；view-source 里详情正文是服务端渲染好的 HTML。卡点：切换查询串数据不动——先检查 load 里读没读 url.searchParams（没读就没有依赖，自然不重跑）；组件里拿不到参数——params 从 load 的 event 来，组件侧读 page.params。

阶段 3：全栈整合

学什么：form actions（default 与具名 action）、fail() 校验回显、use:enhance 渐进增强、$env/static 的 private 与 public 之分、$lib/server 隔离、hooks.server.js 挂 locals、adapter-node 打包部署。资源：跟做Markdown 片段收藏夹实战，然后脱离文章独立重写一遍（换主题：短链接、书签、留言板都行）；API 语法随查参考字典。产出：一个有持久层的 CRUD 应用，要求禁用 JS 也能完整增删改查。验收：空表单提交不出库且错误就地显示；curl 不带 Origin 头 POST 表单端点被 403（理解这是 CSRF 防线）；在生产环境变量里放一个值并只在服务端读取。卡点：表单提交 403——测试请求要带 Origin 头；怀疑密钥泄漏——universal load 与组件里 grep 一下 $env/static/private，出现即错。

阶段 4：打磨与上线

学什么：transition:/in:/out: 与 animate:flip、use:action 与 5.29+ 的 attachments、 错误边界（5.3+）、页面选项 prerender/ssr/csr 的取舍、adapter-static 与 adapter-node 的边界、data-sveltekit-preloaddata 预取。资源：参考字典的模板语法组与配置组条目，adapter 行为以官方 docs/kit/page-options 与 adapters 章节为准。产出：把阶段 2 的三页小站加上过渡与错误边界，prerender 后部署（静态托管或 VPS 上 node 跑），用真域名访问一次。验收：全站导航无闪白；人为抛错后错误边界展示兜底 UI 而非整页崩溃。卡点：adapter-static 打包报某页不可 prerender——该页用了 server load 或 cookies，要么改成构建期可算的数据，要么整站换 adapter-node。

避坑清单

• 不要拿 Svelte 4 的教程入门。$: 响应式语句、on:click 指令、export let 都被 5 取代，混学的产出是”既跑不起来也读不懂”的代码；资料认准 svelte.dev 的 Svelte 5 文档与 tutorial，存量项目迁移交给官方 sv migrate 脚本。
• 不要用 $effect 补数据。那是把 SSR 首屏白做、多一次客户端往返，还常常引发 effect 自触发的更新循环；数据归 load，派生归 $derived，$effect 只管外部世界。
• 不要跳过 load 直接 onMount 里 fetch。页面会先白屏再出内容，SEO 抓到的也是空壳；load 的服务端执行正是 SvelteKit 替你做的第一等优化。
• 不要在客户端代码里碰密钥。$env/static/private 只能进 server load、actions、hooks，universal load 里 import 都不行；上线前全局搜一遍，$lib/server 目录之外出现就要警惕。
• 不要默认选 adapter-static。用了一个 server load 它就打不出包；先问”页面数据是否构建期可算”，答案是”否”就老实用 adapter-node。

学完之后

四个阶段做完，你手里有一个跑在生产环境的全栈应用和一套可复用的判断（何时 load、何时 action、何时 derived），这已经覆盖 Svelte 日常开发的八成场景。往深走的两条路：一是把实战篇的片段收藏夹继续加功能（全文检索、导入导出），在真实需求里撞问题；二是对照本站即将与已发布的SolidJS 入门看看”没有虚拟 DOM”的运行时信号路线——两套心智对读，对前端框架的理解会立体很多。工具层面想横向扩展的，本站 Node 系列（异步、流、HTTP 路由）与阶段 0 的三篇是同一条后端主线的延伸。

版本核实（以官方文档为准）：截至本文（2025-11-13）稳定线为 Svelte 5.43.x、SvelteKit 2.48.x、sv CLI 0.9.x；svelte:boundary 自 Svelte 5.3、attachments 自 5.29、$app/state 自 SvelteKit 2.12 起可用；remote functions 截至 2025-11 仍为实验特性，本路线不依赖它。安装与部署命令不钉版本号，以 svelte.dev 当前文档为准。