框架 · 2020 年发布
SvelteKit 是使用 Svelte 构建 Web 应用的官方框架，提供基于文件的路由、服务器端渲染、数据加载和灵活的部署方式。
SvelteKit 是 Svelte 团队开发的官方应用框架，于 2020 年首次公开，以开源方式开发。它构建在 Svelte 之上——Svelte 会在构建时把组件编译成高效的 JavaScript——并增加了路由、服务器端渲染（SSR）、数据加载、表单处理以及构建和部署能力，开发服务器和打包则由 Vite 负责。当前一代 Svelte 使用 $state、$derived、$effect、$props 等符文（rune）来表达响应式。
SvelteKit 的优势在于可以按页面选择渲染方式。博客文章、文档这类对所有人都相同的内容可以在构建时预渲染；因用户而异的页面在服务器上渲染；高度依赖浏览器 API 的界面则可以只在客户端渲染。表单 action 在没有 JavaScript 时也能工作，并支持渐进增强。只需更换适配器，同一套代码就能部署到 Node.js 服务器、静态托管，或 Vercel、Netlify、Cloudflare 等平台。
入门时，建议先用 npx sv create 创建项目，然后按顺序完成 svelte.dev 上的交互式教程：先学 Svelte 基础，再学 SvelteKit。较早的资料中常见 export let、$lib、svelte.config.js 等如今已经改变的语法和配置，因此学习时应以官方文档和当前的符文语法为准。
$state、$derived、$effect 和 $props 让响应式一目了然，编译器生成的代码无需虚拟 DOM，只更新发生变化的部分。
src/routes 的目录结构就是 URL 结构；+page、+layout、+server、+error 文件分别定义页面、公共布局、API 和错误页面。
通过 prerender、ssr、csr 选项，为每个页面选择服务器端渲染、客户端渲染或预渲染。
用自动获得类型的 load 函数加载数据，用即使没有 JavaScript 也能运行的表单 action 修改数据。
SvelteKit 的开发基于 Node.js。请安装当前的 LTS 版本，然后在新的终端中确认 node 和 npm 能显示版本号。
node --version && npm --version使用官方命令行工具 sv 创建新项目。过程中可以选择模板、是否使用 TypeScript，以及 Prettier、ESLint、Vitest、Playwright 等附加功能。
npx sv create my-app进入项目目录，安装依赖并启动开发服务器。浏览器会打开 http://localhost:5173，保存文件后修改会立即生效。
cd my-app && npm install && npm run dev -- --opensrc/routes/+page.svelte 是网站首页（/）。用 $state 符文创建的 count 每次变化都会自动更新界面，传给 onclick 属性的函数在每次点击时把它加 1。要添加新页面，只需新建目录，例如 src/routes/about/+page.svelte。
src/routes/+page.svelte
<script lang="ts">
let count = $state(0);
</script>
<h1>Hello, SvelteKit!</h1>
<button onclick={() => count++}>
Clicked {count} times
</button>
npx sv create my-app && cd my-app && npm install && npm run dev共六章，带你从安装一步步了解 SvelteKit 的核心概念。
在这里提问、分享经验，交流关于 SvelteKit 的看法。
还没有讨论。来发起第一个吧。
0 条评论
登录 · 登录后即可发表评论。