Svelte 是一个组件框架，而 SvelteKit 是一个应用框架（有人称之为”元框架”），它解决了构建生产应用时的棘手问题：

• 路由
• 服务端渲染
• 数据获取
• Service workers
• TypeScript 集成
• 预渲染
• 单页应用
• 库打包
• 优化生产构建
• 部署到不同的托管提供商
• ...等等

SvelteKit 应用默认采用服务端渲染（类似传统的”多页应用”或 MPAs），以获得出色的首次加载性能和 SEO 特性，但随后可以过渡到客户端导航（类似现代的”单页应用”或 SPA），避免在用户导航时重新加载所有内容（包括第三方分析代码等）。它们可以在任何支持 JavaScript 的地方运行，尽管 — 正如我们将看到的 — 你的用户可能根本不需要运行任何 JavaScript。

如果这听起来很复杂，别担心：SvelteKit 是一个与你一同成长的框架！从简单开始，根据需要添加新功能。

项目结构

在右侧的文件树查看器中，你会看到 SvelteKit 项目中需要的几个文件。

如果你之前使用过 Node.js，那么 package.json 对你来说会很熟悉。它列出了项目的依赖项 — 包括 svelte 和 @sveltejs/kit — 以及用于与 SvelteKit CLI 交互的各种 scripts。（我们目前在底部窗口中运行 npm run dev。）

注意它还指定了 "type": "module"，这意味着 .js 文件默认被视为原生 JavaScript 模块，而不是传统的 CommonJS 格式。

svelte.config.js 包含你的项目配置。现在我们不需要担心这个文件，但如果你好奇的话，可以访问文档。

vite.config.js 包含 Vite 配置。因为 SvelteKit 使用 Vite，所以你可以使用 Vite 功能，如热模块替换、TypeScript 支持、静态资源处理等。

src 是存放应用源代码的地方。src/app.html 是你的页面模板（SvelteKit 会适当替换 %sveltekit.head% 和 %sveltekit.body%），而 src/routes 定义了应用的路由。

最后，static 包含了任何在应用部署时应该包含的资源（如 favicon.png 或 robots.txt）。