Skip to main content
基本 Svelte
介绍
反应性
属性
逻辑
事件
绑定
类和样式
动作
转换
高级 Svelte
高级反应性
重用内容
运动
高级绑定
高级转换
上下文 API
特殊元素
<script module>
后续步骤
基本 SvelteKit
介绍
路由
加载数据
标题和 cookie
共享模块
表单
API 路由
$app/state
错误和重定向
高级 SvelteKit
钩子
页面选项
链接选项
高级路由
高级加载
环境变量
结论

欢迎来到 Svelte 教程!这将教会你轻松构建各种规模的 Web 应用所需的一切知识,这些应用具有高性能和小巧的占用空间。

¥Welcome to the Svelte tutorial! This will teach you everything you need to know to easily build web applications of all sizes, with high performance and a small footprint.

你还可以查阅 API 文档 并访问 playground,或者 — 如果你迫不及待地想在本地开始破解你的机器 — 使用 npx sv create 创建一个项目。

¥You can also consult the API docs and visit the playground, or — if you’re impatient to start hacking on your machine locally — create a project with npx sv create.

什么是 Svelte?(What is Svelte?)

¥What is Svelte?

Svelte 是一种用于构建 Web 应用的工具。与其他用户界面框架一样,它允许你使用结合标记、样式和行为的组件以声明方式构建应用。

¥Svelte is a tool for building web applications. Like other user interface frameworks, it allows you to build your app declaratively out of components that combine markup, styles and behaviours.

这些组件被编译成小而高效的 JavaScript 模块,从而消除了传统上与 UI 框架相关的开销。

¥These components are compiled into small, efficient JavaScript modules that eliminate overhead traditionally associated with UI frameworks.

你可以使用 Svelte 构建整个应用(例如,使用像 SvelteKit 这样的应用框架,本教程将介绍),也可以将其逐步添加到现有代码库中。你还可以将组件作为可在任何地方使用的独立包发送。

¥You can build your entire app with Svelte (for example, using an application framework like SvelteKit, which this tutorial will cover), or you can add it incrementally to an existing codebase. You can also ship components as standalone packages that work anywhere.

如何使用教程(How to use this tutorial)

¥How to use this tutorial

你需要对 HTML、CSS 和 JavaScript 有基本的了解才能理解 Svelte。

¥[!NOTE] You’ll need to have basic familiarity with HTML, CSS and JavaScript to understand Svelte.

本教程分为四个主要部分:

¥This tutorial is split into four main parts:

每个部分都将展示一个旨在说明功能的练习。后面的练习以前面的练习为基础,因此建议你从头到尾进行。如有必要,你可以通过上面的菜单导航。

¥Each section will present an exercise designed to illustrate a feature. Later exercises build on the knowledge gained in earlier ones, so it’s recommended that you go from start to finish. If necessary, you can navigate via the menu above.

如果你遇到困难,可以单击屏幕右上角的 solve 按钮。(solve 按钮在不包含练习的部分(如本部分)上被禁用。)尽量不要过多依赖它;通过弄清楚将每个建议的代码块放在哪里并手动将其输入到编辑器中,你将学得更快。

¥If you get stuck, you can click the solve button in the top right of the screen. (The solve button is disabled on sections like this one that don’t include an exercise.) Try not to rely on it too much; you will learn faster by figuring out where to put each suggested code block and manually typing it in to the editor.

上一页 下一页
1
2
<h1>Welcome!</h1>