[{"data":1,"prerenderedAt":261},["ShallowReactive",2],{"post-sveltekit-intro":3},{"id":4,"title":5,"author":6,"body":7,"description":248,"draft":249,"extension":250,"image":251,"meta":252,"navigation":253,"path":254,"pinned":249,"published":255,"seo":256,"stem":257,"tags":258,"__hash__":260},"posts\u002Fposts\u002Fsveltekit-intro\u002Findex.md","SvelteKit 入门：为什么它比你想象的更简单",null,{"type":8,"value":9,"toc":238},"minimark",[10,15,19,26,29,34,42,110,114,120,128,132,135,138,214,217,228,234],[11,12,14],"h2",{"id":13},"什么是-sveltekit","什么是 SvelteKit？",[16,17,18],"p",{},"SvelteKit 是 Svelte 的官方全栈框架，类似于 React 之于 Next.js 的关系。它提供了路由、SSR、SSG 等能力，让开发者可以快速构建现代 Web 应用。",[16,20,21],{},[22,23],"img",{"alt":24,"src":25},"SvelteKit Logo","https:\u002F\u002Fraw.githubusercontent.com\u002Fsveltejs\u002Fbranding\u002Fmaster\u002Fsvelte-logo.svg",[11,27,28],{"id":28},"核心特点",[30,31,33],"h3",{"id":32},"_1-编译时框架","1. 编译时框架",[16,35,36,37,41],{},"Svelte 和 React\u002FVue 最大的区别在于：",[38,39,40],"strong",{},"它在编译阶段就把组件转成原生 JS","，运行时没有虚拟 DOM。",[43,44,49],"pre",{"className":45,"code":46,"language":47,"meta":48,"style":48},"language-typescript shiki shiki-themes github-light github-dark","\u002F\u002F Svelte 组件（编译后变成直接的 DOM 操作）\nlet count = 0\nfunction increment() {\n  count += 1\n}\n","typescript","",[50,51,52,61,79,92,104],"code",{"__ignoreMap":48},[53,54,57],"span",{"class":55,"line":56},"line",1,[53,58,60],{"class":59},"sHbNN","\u002F\u002F Svelte 组件（编译后变成直接的 DOM 操作）\n",[53,62,64,68,72,75],{"class":55,"line":63},2,[53,65,67],{"class":66},"siTax","let",[53,69,71],{"class":70},"sIX_F"," count ",[53,73,74],{"class":66},"=",[53,76,78],{"class":77},"suQ91"," 0\n",[53,80,82,85,89],{"class":55,"line":81},3,[53,83,84],{"class":66},"function",[53,86,88],{"class":87},"sw2iP"," increment",[53,90,91],{"class":70},"() {\n",[53,93,95,98,101],{"class":55,"line":94},4,[53,96,97],{"class":70},"  count ",[53,99,100],{"class":66},"+=",[53,102,103],{"class":77}," 1\n",[53,105,107],{"class":55,"line":106},5,[53,108,109],{"class":70},"}\n",[30,111,113],{"id":112},"_2-文件路由","2. 文件路由",[16,115,116,119],{},[50,117,118],{},"src\u002Froutes\u002F"," 目录结构即 URL，不需要手动配置路由表：",[43,121,126],{"className":122,"code":124,"language":125},[123],"language-text","src\u002Froutes\u002F\n├── +page.svelte        → \u002F\n├── about\u002F\n│   └── +page.svelte    → \u002Fabout\n└── posts\u002F\n    ├── +page.svelte    → \u002Fposts\n    └── [slug]\u002F\n        └── +page.svelte → \u002Fposts\u002F:slug\n","text",[50,127,124],{"__ignoreMap":48},[30,129,131],{"id":130},"_3-全栈能力","3. 全栈能力",[16,133,134],{},"SvelteKit 内置了服务端渲染（SSR）、静态站点生成（SSG）、API 路由等功能，开箱即用。",[11,136,137],{"id":137},"和其他框架对比",[139,140,141,160],"table",{},[142,143,144],"thead",{},[145,146,147,151,154,157],"tr",{},[148,149,150],"th",{},"特性",[148,152,153],{},"SvelteKit",[148,155,156],{},"Next.js",[148,158,159],{},"Nuxt",[161,162,163,177,190,203],"tbody",{},[145,164,165,169,172,175],{},[166,167,168],"td",{},"学习曲线",[166,170,171],{},"低",[166,173,174],{},"中",[166,176,174],{},[145,178,179,182,185,188],{},[166,180,181],{},"包体积",[166,183,184],{},"小",[166,186,187],{},"大",[166,189,174],{},[145,191,192,195,198,201],{},[166,193,194],{},"运行时开销",[166,196,197],{},"无",[166,199,200],{},"有",[166,202,200],{},[145,204,205,208,210,212],{},[166,206,207],{},"生态",[166,209,184],{},[166,211,187],{},[166,213,187],{},[11,215,216],{"id":216},"总结",[16,218,219,220,223,224,227],{},"如果你追求",[38,221,222],{},"简洁的代码","和",[38,225,226],{},"极致的性能","，SvelteKit 是一个非常值得尝试的选择。它的学习曲线平缓，写起来就像在写原生 HTML\u002FCSS\u002FJS。",[16,229,230],{},[22,231],{"alt":232,"src":233},"Svelte 编译过程","https:\u002F\u002Fsvelte.dev\u002Fsvelte-logo-horizontal.svg",[235,236,237],"style",{},"html pre.shiki code .sHbNN, html code.shiki .sHbNN{--shiki-light:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .siTax, html code.shiki .siTax{--shiki-light:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sIX_F, html code.shiki .sIX_F{--shiki-light:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .suQ91, html code.shiki .suQ91{--shiki-light:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sw2iP, html code.shiki .sw2iP{--shiki-light:#6F42C1;--shiki-dark:#B392F0}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":48,"searchDepth":63,"depth":81,"links":239},[240,241,246,247],{"id":13,"depth":63,"text":14},{"id":28,"depth":63,"text":28,"children":242},[243,244,245],{"id":32,"depth":81,"text":33},{"id":112,"depth":81,"text":113},{"id":130,"depth":81,"text":131},{"id":137,"depth":63,"text":137},{"id":216,"depth":63,"text":216},"SvelteKit 是一个全栈 Svelte 框架，这篇文章带你了解它的核心概念和优势。",false,"md","\u002Fposts\u002Fsveltekit-intro\u002Fimg\u002Fcover.jpg",{},true,"\u002Fposts\u002Fsveltekit-intro","2026-05-30",{"title":5,"description":248},"posts\u002Fsveltekit-intro\u002Findex",[153,259],"前端框架","CX0-JetJMg1g1czqxmpimi_Skv99hZAsMNTBHhelFAc",1780733791991]