前言

Svelte，一个非常“有趣”、用起来“很爽”的前端框架。从 Svelte 诞生之初，就备受开发者的喜爱，根据统计，从 2019 年到 2024 年，连续 6 年一直是开发者最感兴趣的前端框架 No.1：

Svelte 以其独特的编译时优化机制著称，具有轻量级、高性能、易上手等特性，非常适合构建轻量级 Web 项目，也是我做个人项目的首选技术栈。

目前 Svelte 基于 Svelte 5 发布了最新的官方文档，但却缺少对应的中文文档。为了帮助大家学习 Svelte，为爱发电翻译了官方文档。

我同时搭建了 Svelte 最新的中文文档站点：https://svelte.yayujs.com ，如果需要辅助学习，也可以入手我的小册《Svelte 开发指南》，语法篇、实战篇、原理篇三大篇章带你系统掌握 Svelte！

虽说是翻译，但个人并不喜欢严格遵守原文，为了保证中文阅读流畅，会删减部分语句，对难懂的部分也会另做补充解释，希望能给大家带来一个好的中文学习体验。

欢迎围观我的“朋友圈”、加入“低调务实优秀中国好青年”前端社群，分享技术，带你成长。

概述

Svelte 是一个用于构建 web 用户界面的框架。它使用编译器将用 HTML、CSS 和 JavaScript 编写的声明式组件…

<!--- file: App.svelte  --->

<script>

function greet() {

alert('欢迎使用 Svelte！');

}

</script>

  

<button  onclick={greet}>点击我</button>

  

<style>

button {

font-size: 2em;

}

</style>

…转换为精简的、高度优化的 JavaScript。

你可以用它在 web 上构建任何东西，从独立组件到全栈应用（使用 Svelte 的配套应用框架 SvelteKit），以及介于两者之间的任何东西。

这些页面作为参考文档。如果你是 Svelte 新手，我们建议从交互式教程开始，遇到问题时再回到这里查阅。

你也可以在在线演练场尝试 Svelte，或者如果你需要更完整功能的环境，可以在 StackBlitz 上尝试。

入门指南

我们推荐使用 SvelteKit，这是由 Vite 驱动的 Svelte 官方应用框架：

npx  sv  create  myapp

cd  myapp

npm  install

npm  run  dev

如果你还不了解 Svelte 也不用担心！你现在可以暂时忽略 SvelteKit 带来的所有优秀特性，以后再深入了解。

SvelteKit 的替代方案

你也可以通过运行 npm create vite@latest、选择 svelte 选项直接使用带 Vite 的 Svelte。这样，npm run build 将使用 vite-plugin-svelte 在 dist 目录中生成 HTML、JS 和 CSS 文件。大多数情况下，你可能还需要选择一个路由库。

虽然也有 Rollup、Webpack 和其他一些工具的插件，但我们推荐使用 Vite。

编辑器工具

Svelte 团队维护着一个 VS Code 插件，同时也有与其他编辑器和工具的集成。

你也可以使用 sv check 在命令行检查你的代码。

获取帮助

不要羞于在 Discord 聊天室寻求帮助！你也可以在 Stack Overflow 上找到答案。

Svelte 系列

本篇已收录在专栏 《Svelte 系列》，该系列预计 40 篇。

此外我还写过 JavaScript 系列、TypeScript 系列、React 系列、Next.js 系列、VuePress 博客搭建系列等 14 个系列文章， 全系列文章目录：https://github.com/mqyqingfeng/Blog

通过文字建立交流本身就是一种缘分，欢迎围观我的“朋友圈”、加入“低调务实优秀中国好青年”前端社群，分享技术，带你成长。