介绍
开始之前(Before we begin)
¥Before we begin
如果你是 Svelte 或 SvelteKit 的新手,我们建议你查看 互动教程。
¥[!NOTE] If you’re new to Svelte or SvelteKit we recommend checking out the interactive tutorial.
如果你遇到困难,请在 Discord 聊天室 中寻求帮助。
¥If you get stuck, reach out for help in the Discord chatroom.
什么是 SvelteKit?(What is SvelteKit?)
¥What is SvelteKit?
SvelteKit 是一个使用 Svelte 快速开发强大、高性能 Web 应用的框架。如果你来自 React,SvelteKit 与 Next 类似。如果你来自 Vue,SvelteKit 与 Nuxt 类似。
¥SvelteKit is a framework for rapidly developing robust, performant web applications using Svelte. If you’re coming from React, SvelteKit is similar to Next. If you’re coming from Vue, SvelteKit is similar to Nuxt.
要了解有关使用 SvelteKit 构建的应用类型的更多信息,请参阅 有关项目类型的文档。
¥To learn more about the kinds of applications you can build with SvelteKit, see the documentation regarding project types.
什么是 Svelte?(What is Svelte?)
¥What is Svelte?
简而言之,Svelte 是一种编写用户界面组件的方式 - 例如导航栏、评论部分或联系表单 - 用户可在浏览器中看到并与之交互。Svelte 编译器将你的组件转换为可以运行以渲染页面 HTML 的 JavaScript 和设置页面样式的 CSS。你不需要了解 Svelte 即可理解本指南的其余部分,但它会有所帮助。如果你想了解更多信息,请查看 Svelte 教程。
¥In short, Svelte is a way of writing user interface components — like a navigation bar, comment section, or contact form — that users see and interact with in their browsers. The Svelte compiler converts your components to JavaScript that can be run to render the HTML for the page and to CSS that styles the page. You don’t need to know Svelte to understand the rest of this guide, but it will help. If you’d like to learn more, check out the Svelte tutorial.
SvelteKit 与 Svelte(SvelteKit vs Svelte)
¥SvelteKit vs Svelte
Svelte 渲染 UI 组件。你可以仅使用 Svelte 组合这些组件并渲染整个页面,但编写整个应用需要的不仅仅是 Svelte。
¥Svelte renders UI components. You can compose these components and render an entire page with just Svelte, but you need more than just Svelte to write an entire app.
SvelteKit 可帮助你构建 Web 应用,同时遵循现代最佳实践并提供解决常见开发挑战的解决方案。它提供从基本功能(例如单击链接时更新 UI 的 router)到更高级功能的一切。其广泛的功能列表包括 构建优化,仅加载所需的最少代码;离线支持;preloading 用户导航前的页面;可配置渲染 通过 SSR 在服务器上处理应用的不同部分,通过 客户端渲染 在浏览器中处理,或者在构建时使用 prerendering 处理;图片优化;还有更多。使用所有现代最佳实践构建应用非常复杂,但 SvelteKit 会为你完成所有无聊的工作,以便你可以继续进行创意部分。
¥SvelteKit helps you build web apps while following modern best practices and providing solutions to common development challenges. It offers everything from basic functionalities — like a router that updates your UI when a link is clicked — to more advanced capabilities. Its extensive list of features includes build optimizations to load only the minimal required code; offline support; preloading pages before user navigation; configurable rendering to handle different parts of your app on the server via SSR, in the browser through client-side rendering, or at build-time with prerendering; image optimization; and much more. Building an app with all the modern best practices is fiendishly complicated, but SvelteKit does all the boring stuff for you so that you can get on with the creative part.
它立即反映浏览器中代码的更改,通过利用 Vite 和 Svelte 插件 来执行 热模块替换 (HMR),提供闪电般快速且功能丰富的开发体验。
¥It reflects changes to your code in the browser instantly to provide a lightning-fast and feature-rich development experience by leveraging Vite with a Svelte plugin to do Hot Module Replacement (HMR).