跳至主要内容

Svelte 入门指南

从未使用过 Node.js 或命令行？没问题

Rich Harris

本简短指南旨在帮助您——那些已经看过教程并希望开始创建 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），并将它们转换为在浏览器中打开应用程序时实际运行的代码。

说到浏览器，请打开浏览器并导航到https://127.0.0.1:5173。这是您的应用程序在本地Web 服务器（因此为“localhost”）的 5173 端口上运行。

尝试更改src/App.svelte并保存。应用程序将更新您的更改。

构建您的应用程序

在最后一步中，我们以“开发模式”运行了应用程序。在开发模式下，Svelte 会添加额外的代码来帮助调试，并且 Vite 会跳过将应用程序的 JavaScript 压缩的最后一步。

当您与全世界分享您的应用程序时，您希望以“生产模式”构建它，以便它对最终用户尽可能小巧高效。为此，请使用build命令

npm run build

您的dist目录现在包含了应用程序的优化版本。您可以像这样运行它

npm run preview