Svelte 是一个组件框架，而 SvelteKit 是一个应用框架（或 ‘metaframework’，取决于你问谁），它解决了构建可用于生产的东西的棘手问题：

¥Whereas Svelte is a component framework, SvelteKit is an app framework (or ‘metaframework’, depending on who you ask) that solves the tricky problems of building something production-ready:

• 路由

  ¥Routing

• 服务器端渲染

  ¥Server-side rendering

• 数据获取

  ¥Data fetching

• 服务工作者

  ¥Service workers

• TypeScript 集成

  ¥TypeScript integration

• 预渲染

  ¥Prerendering

• 单页应用

  ¥Single-page apps

• 库打包

  ¥Library packaging

• 优化生产版本

  ¥Optimised production builds

• 部署到不同的托管服务提供商

  ¥Deploying to different hosting providers

• ...等等

  ¥...and so on

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

¥SvelteKit apps are server-rendered by default (like traditional ‘multi-page apps’ or MPAs) for excellent first load performance and SEO characteristics, but can then transition to client-side navigation (like modern ‘single-page apps’ or SPAs) to avoid jankily reloading everything (including things like third-party analytics code) when the user navigates. They can run anywhere JavaScript runs, though — as we’ll see — your users may not need to run any JavaScript at all.

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

¥If that sounds complicated, worry not: SvelteKit is the framework that grows with you! Start simple and add new features as you need them.

项目结构(Project structure)

¥Project structure

在右侧的文件树查看器中，你将看到 SvelteKit 希望在项目中找到的少数文件。

¥On the right, in the file tree viewer, you’ll see a handful of files that SvelteKit expects to find in a project.

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

¥package.json will be familiar if you’ve worked with Node.js before. It lists the project’s dependencies — including svelte and @sveltejs/kit — and a variety of scripts for interacting with the SvelteKit CLI. (We’re currently running npm run dev in the bottom window.)

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

¥[!NOTE] Note that it also specifies "type": "module", which means that .js files are treated as native JavaScript modules by default, rather than the legacy CommonJS format.

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

¥svelte.config.js contains your project configuration. We don’t need to worry about this file for now, but if you’re curious, visit the documentation.

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

¥vite.config.js contains the Vite configuration. Because SvelteKit uses Vite, you can use Vite features like hot module replacement, TypeScript support, static asset handling and so on.

src 是你的应用源代码所在的位置。src/app.html 是你的页面模板（SvelteKit 会根据需要替换 %sveltekit.head% 和 %sveltekit.body%），src/routes 定义你的应用的 routes。

¥src is where your app’s source code goes. src/app.html is your page template (SvelteKit replaces the %sveltekit.head% and %sveltekit.body% as appropriate), and src/routes defines the routes of your app.

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

¥Finally, static contains any assets (like a favicon.png or a robots.txt) that should be included when your app is deployed.