虽然 Svelte 是一个组件框架，但 SvelteKit 是一个应用框架（或者根据你询问的对象，可以称为“元框架”），它解决了构建生产就绪应用中棘手的问题

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

默认情况下，SvelteKit 应用是服务器端渲染的（就像传统的“多页应用”或 MPA），这可以带来极佳的首屏加载性能和 SEO 特性，但随后可以过渡到客户端导航（就像现代的“单页应用”或 SPA），以避免在用户导航时笨拙地重新加载所有内容（包括诸如第三方分析代码之类的内容）。它们可以在任何 JavaScript 可以运行的地方运行，尽管——正如我们即将看到的——你的用户可能根本不需要运行任何 JavaScript。

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

项目结构

在右侧的文件树查看器中，你会看到 SvelteKit 预期在项目中找到的一些文件。

如果你之前使用过 Node.js，那么你应该熟悉package.json。它列出了项目的依赖项——包括svelte和@sveltejs/kit——以及各种用于与 SvelteKit CLI 交互的脚本。（我们目前在底部窗口中运行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）。