面向新手开发者的 Svelte 指南

这份简短的指南是为你准备的——那些已经看过教程并想开始创建 Svelte 应用，但在使用 JavaScript 构建工具方面经验不多的人——帮助你快速上手。

如果有什么不明白的地方，或者我们有什么说得不够详细的地方，欢迎提出问题或为本页提出修改建议，这将帮助我们为更多人提供帮助。

如果你在按照本指南操作时遇到任何问题，最好的求助地方是在聊天室。

首先

你将使用命令行，也称为终端。在 Windows 上，你可以通过在开始菜单运行命令提示符来访问它；在 Mac 上，同时按下 Cmd 和 Space 键调出 Spotlight，然后开始输入 Terminal.app。在大多数 Linux 系统上，Ctrl-Alt-T 可以调出命令行。

命令行是一种与计算机交互的方式（或者与其他计算机交互！不过这是另一个话题），它比大多数人日常使用的 GUI（图形用户界面）具有更强大的功能和控制力。

进入命令行后，你可以使用 ls（Windows 上是 dir）列出当前目录的内容，使用 cd 更改当前目录。例如，如果你在主目录中有一个 Development 项目目录，你可以输入：

cd Development

进入该目录。然后，你可以使用 mkdir 命令创建一个新的项目目录：

mkdir svelte-projects
cd svelte-projects

完整的命令行介绍超出了本指南的范围，但这里有一些更有用的命令：

• cd .. — 导航到当前目录的父目录
• cat my-file.txt — 在 Mac/Linux 上（Windows 上是 type my-file.txt），列出 my-file.txt 的内容
• open .（Windows 上是 start .）— 在 Finder 或文件资源管理器中打开当前目录

安装 Node.js

Node 是一种在命令行上运行 JavaScript 的方式。它被许多工具使用，包括 Svelte。如果你还没有安装它，最简单的方法是直接从网站下载最新版本。

安装后，你将可以使用三个新命令：

• node my-file.js — 运行 my-file.js 中的 JavaScript
• npm [子命令] — npm 是一种安装应用程序依赖的’包'的方式，比如 svelte 包
• npx [子命令] — 一种方便的方式来运行 npm 上可用的程序，而无需永久安装它们

安装文本编辑器

要编写代码，你需要一个好的编辑器。最受欢迎的选择是 Visual Studio Code 或 VSCode，这是理所当然的——它设计良好且功能齐全，并且有丰富的扩展（包括 Svelte 的扩展，它提供语法高亮和编写组件时的诊断信息）。

创建项目

我们将使用 Svelte + Vite 模板。你不是必须使用项目模板，但它意味着你可以减少很多设置工作。

在命令行中，导航到你想创建新项目的位置，然后输入以下命令（你可以粘贴全部内容，但如果你养成一次写一行然后运行的习惯，你会培养更好的肌肉记忆）：

npm create vite@latest my-svelte-project -- --template svelte
cd my-svelte-project
npm install

如果你更喜欢 TypeScript，可以将 --template svelte 替换为 --template svelte-ts。

这将创建一个新目录 my-svelte-project，添加来自 create-vite/template-svelte 模板的文件，并从 npm 安装一些包。在你的文本编辑器中打开该目录并四处看看。应用的”源代码”位于 src 目录中，而你的应用可以加载的文件则在 public 中。

在 package.json 文件中，有一个叫做 "scripts" 的部分。这些脚本定义了用于处理你的应用程序的快捷方式 —— dev、build 和 preview。要在开发模式下启动你的应用，输入以下内容：

npm run dev

运行 dev 脚本会启动一个叫做 Vite 的程序。Vite 的工作是获取你的应用程序的源文件，将它们传递给其他程序（在我们的例子中包括 Svelte），并将它们转换成当你在浏览器中打开应用程序时实际运行的代码。

说到这里，打开浏览器并导航到 http://localhost:5173。这是你的应用程序在本地网络服务器（因此是localhost）上的 5173 端口上运行。

试着更改 src/App.svelte 并保存它。应用程序将更新你的更改。

构建你的应用

在最后一步中，我们是在’开发模式’下运行应用。在开发模式下，Svelte 添加了额外的代码来帮助调试，而 Vite 跳过了压缩应用 JavaScript 的最后一步。

当你与世界分享你的应用时，你想要以’生产模式’构建它，这样它对最终用户来说就会尽可能小和高效。要做到这一点，使用 build 命令：

npm run build

你的 dist 目录现在包含了你的应用的优化版本。你可以这样运行它：

npm run preview