0Pricing
Sveltejs Academy · 课时

项目结构：src、routes、static

探索 SvelteKit 项目的目录布局，以及每个文件夹的用途。

项目结构：src、routes、static 是 CoddyKit 上的免费 Sveltejs Academy 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Sveltejs Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Sveltejs Academy 课程共包含 4 节课。

顶层文件夹

SvelteKit 项目包含以下关键文件夹：src/、static/，以及位于根目录的配置文件。

src 文件夹

src/ 包含您的全部应用代码：路由、组件、库代码和应用入口点。

src/routes 文件夹

src/routes 中的每个子文件夹都对应一个 URL。文件夹中的 +page.svelte 文件定义了该路径要渲染的内容。

路由示例

路径 src/routes/about/+page.svelte 会在浏览器的 /about 路径上渲染。

src/routes/
  +page.svelte         -> /
  about/+page.svelte   -> /about
  blog/[slug]/+page.svelte -> /blog/:slug

src/lib 文件夹

src/lib 用于存放共享模块和组件。请使用别名 $lib 从中导入内容。

import Button from "$lib/Button.svelte";

static 文件夹

static/ 中的文件会原样提供在 URL 根路径下。请将 favicon.png、robots.txt 和其他未经处理的资源放在这里。

配置文件

根目录包含 svelte.config.js、vite.config.js、package.json，以及可选的 tsconfig.json。

svelte.config.js

用于定义预处理器、适配器和 Kit 级别的选项。适配器决定应用如何构建以进行部署。

import adapter from "@sveltejs/adapter-auto";
export default { kit: { adapter: adapter() } };

vite.config.js

用于配置 Vite（底层构建工具）。您可以在这里添加插件、别名、服务器代理规则和构建选项。

app.html 文件

src/app.html 是包裹每个页面的 HTML 外壳。像 %sveltekit.head% 这样的占位符会在构建时填充。

钩子文件

src/hooks.server.js 允许您在服务器上拦截请求。我们将在后续课程中介绍钩子。

快速检查

SvelteKit 的页面路由文件位于哪里？

回顾

现在您已经了解项目布局：src 用于代码，routes 用于页面，lib 用于共享代码，static 用于原始资源。

常见问题解答

「项目结构：src、routes、static」课时是免费的吗？

是的 — 「项目结构：src、routes、static」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Sveltejs Academy 课程的其余内容，请升级到 CoddyKit PRO。 Sveltejs Academy 课程共包含 4 节课。

「项目结构：src、routes、static」这节课中我会学到什么？

探索 SvelteKit 项目的目录布局，以及每个文件夹的用途。 你通过在浏览器中直接运行的动手代码来练习 Sveltejs Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Sveltejs Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Sveltejs Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。

「项目结构：src、routes、static」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Sveltejs Academy 课中编写并运行代码吗？

能。每节 Sveltejs Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 什么是 Svelte，以及它为何采用编译方式
  2. 使用 npm create svelte 创建项目
  3. 项目结构：src、routes、static
  4. 开发服务器与热模块替换
← 返回 Sveltejs Academy