NgSysV.安装 Sveltekit 并创建一个简单的全 HTML Web 应用程序

该帖子系列已在 NgateSystems.com 上建立索引。您还可以在那里找到超级有用的关键字搜索工具。

最后评论：24 年 11 月

一、简介

这篇文章旨在让您初步了解作为网络应用程序开发人员的现实生活。它以一个简单的工作 Web 应用程序结束，但必须从棘手的“安装”任务开始，您必须协商才能运行它。

虽然这很麻烦，但坚持下去。一旦你解决了这些问题，你将有机会使用 Microsoft 的 VSCode 编辑器来构建一小段 HTML。最后，您将使用 VSCode 终端会话通过 Sveltekit 本地服务器在浏览器中启动它。

这听起来不错吗？然后继续阅读。

2. 安装

绝对的初学者可能会觉得这一部分很棘手，因为它涉及使用一些不太用户友好的程序。但用不了多久，你就会学到一些将来会反复使用的基本技能。这是你要做的：

1. 创建项目
2. 安装 VSCode 并在其中打开您的项目
3. 打开终端会话
4. 安装 Node.js 和 npm
5. 安装 SvelteKit。

2.1 创建项目

第一步是使用 Windows 文件资源管理器工具创建一个新项目。您需要为此选择一个名称。我建议您使用小写字母和连字符并保持名称简短。像 svelte-dev 这样的东西可能是个好主意。您还应该避免将文件夹放在 Dropbox 或 OneDrive 版本存储中。 Web 应用程序项目往往变得相当庞大，并且很容易压垮通用版本控制系统。无论如何，VSCode 和 Git 将提供您需要的所有版本控制。

2.2 安装 VSCode 并将项目添加到其“工作区”

按照 Visual Studio Code 入门中的说明在您的设备上安装该软件。使用桌面图标启动它，并注意 VSCode 屏幕顶部菜单栏中的“文件”条目。单击此按钮，选择“将文件夹添加到工作区”，导航到项目文件夹位置并选择/添加它。

此时，VSCode 屏幕将在其菜单栏下方显示三列信息：工具栏、显示“工作区”内容详细信息的“资源管理器”面板以及等待您编辑工作区文件的大空白区域。

您可能想知道，当您只有一个项目时，为什么 VSCode 会给您带来“工作区”概念的负担。这是因为，随着时间的推移，您将积累大量项目并发现您想要在它们之间共享代码。 “工作区”允许您操作一组项目。您可以通过右键单击项目并选择“从工作区中删除文件夹”来从工作区中删除项目。如果您关闭并重新启动 VSCode，您会发现它已记住您之前的工作区内容设置并将恢复它。

由于您将经常使用 VSCode，您可能会考虑将 VSCode“固定”到桌面工具栏。请注意，一旦您将项目添加到工作区，VSCode 将在重新启动之间保留该项目，直到您使用 r-单击“从工作区删除文件夹”命令明确删除该文件夹。

2.3 在 VSCode 中打开终端会话

您可以通过在 VSCode 菜单上选择“终端 -> 新终端”，然后在出现的列表中单击您的项目条目，在您的项目上打开一个新的终端会话。如果“终端”选项在菜单栏上不可见，您会在“...”溢出区域中找到它。

“终端”应作为子窗口出现在 VSCode 屏幕右侧编辑区域的底部。可以通过单击并拖动顶部和左侧边框来调整其高度和宽度。您会发现您还可以再次使用 ctrl' 快捷方式打开或关闭它。目前，它正在等待您在前面带有项目文件夹的完整地址的行中输入“终端会话”命令。

如果您迄今为止的 IT 体验完全是通过在 Windows (Microsoft) 和 iOS (Mac) 屏幕上使用“点击和指向”，那么本文中对使用“终端”会话的严重依赖可能会出现作为一种不受欢迎的震惊。

这里的“终端”一词将您带回到计算的早期，早在我们今天使用的“图形用户界面”出现之前。然后，开发人员使用“终端”设备（例如电传打字机或“VDU”视觉显示单元）通过键入“命令”而不是单击按钮来发出操作系统指令。这些“命令外壳”界面对于系统程序员来说仍然具有很大的优势，因为它们易于设置并且高度灵活。因此，终端会话在开发过程中继续广泛使用。当然，如果您是在“点击”界面上长大的，您会认为它们是一种倒退。但您很快就会发现它们运行良好，并且无论如何都会为您不断增长的开发技能范围添加另一个有用的构建块。

人们可以写一本关于终端命令的书，但现在，您只需要了解一些基本事实。首先，你会发现无法使用鼠标来编辑终端命令。如果您在命令中间发现错误，则必须使用“Backspace”键删除后续内容并重新输入。但这种不便被以下事实所抵消：VSCode 中使用的默认 Powershell 终端会话会保留您使用的命令的历史记录，并允许您通过重复按向上箭头键直到弹出您想要的命令来引用上一个命令。向下箭头键可反转该过程。

2.4 安装 Node.js 和 npm

您可能已经感觉有点累了，但坚持下去。您即将开始使用 SvelteKit。

“问题”是 SvelteKit 作为“包”在互联网上分发。 SvelteKit 包的安装需要“包管理器”。什么是包，什么是包管理器？

“包”是一个整齐捆绑的代码文件集合，仔细地标记了版本号，并附有其对其他包的依赖关系的详细信息。现代软件开发实践使用包的层次结构来共享有用的代码组件。

“包管理器”是一种工具，可让您通过解压包的代码内容并将其复制到项目文件夹中来将包“安装”到项目中。包管理器检查与可能已安装的任何其他包的兼容性。

您将在此处使用的包管理器称为 npm（节点包管理器）。包管理要求很高，因此可以使用替代管理器来满足特殊情况。但 npm 包管理器是标准选择，在这里推荐。当您发现需要包含其他组件时，您将在项目开发过程中重复使用 npm。

稍微跳转一下，一旦安装了 npm 包管理器及其运行时环境，您就可以使用它来将“my-package”包安装到您的项目中。您可以通过在 VSCode 终端会话中启动 npm create my-package 这样的命令来完成此操作。这会将“my-package”库文件下载到项目的节点模块文件夹中。

但是有一个障碍 - npm 需要“Node.js 运行时环境”。所以，这个也必须安装。

好消息是，至少对于 Windows 用户来说，Node.js 是通过下载并打开标准 msi（微软安装）文件来安装的。更好的是，由此启动的安装过程还可以让您安装 npm。

然而，运行这个程序对于初学者来说是一个很大的挑战。基本的下载安排记录在 https://nodejs.org/en 的 Run JavaScript Everywhere 中，但这对于操作说明来说非常简单。您可能会发现查看如何在 Windows 上安装 Node.js 和 NPM 中更详细的说明很有帮助。慢慢来。如果出现问题，您只需卸载 Node.js 并重新开始即可。我能给您的最好建议是使用程序提供的标准默认设置 - 覆盖仅适用于专家。

2.5 安装SvelteKit

终于，你能够取得一些进步了！完成此阶段后，您将获得一个在浏览器中运行的简单演示 SvelteKit 页面作为奖励。

1. 像以前一样在 VSCode 中为您的项目打开一个终端会话，然后运行以下 npx 命令：

npx sv create 

*顺便说一句，npx 是嵌入在 npm 中的“包运行器”工具 - 它随 npm 自动安装

自 2024 年 11 月起，这将启动 SvelteKit 对话框，引导您完成使用 Svelte 5 配置项目的过程。

顺便说一句，请放心，如果此过程出现问题并且您想重新开始，您所要做的就是删除项目文件夹的全部内容并再次尝试。另请注意，npm 安装在检查构建到项目中的文件中是否可能存在不兼容性时，通常会显示令人担忧的警告消息列表。作为初学者，这些不太可能与您相关，因此我建议您忽略它们。

Svelte 的第一个问题是“我们应该在哪里创建您的项目？”。由于您的终端会话已在项目文件夹中打开，因此您只需在此处按回车键即可。

现在 Svelte 想知道它应该创建什么风格的项目。我希望你在这里选择“最小”。在终端会话中执行此操作的过程有点尴尬，因为您无法像在网页上那样使用鼠标来切换复选框。您可以使用向下箭头键将自己定位在“最小”行，然后按回车键来表明您的偏好

现在 Svelte 想知道您是否想使用 TypeScript 检查功能。当您开发复杂的生产级 Web 应用程序时，此高级 Javascript 扩展对您至关重要（它控制您在 Javascript 中使用变量类型并确保一致性）。但你在这里不需要这个，你的学习曲线已经呈指数增长，所以我建议你通过按两次向下箭头然后按回车键来选择“否”。

然后，Svelte 想知道您是否愿意添加“其他选项”。列表顶部显示的 ESLint 语法检查工具可能会有所帮助。有时这可能是一个“吵闹”的麻烦，警告您有关您不是特别感兴趣的问题。但是，总的来说，我建议您通过按空格键和返回键来接受它。

最后，Svelte 会询问您要使用哪个包管理器。选择 npm

您可以安全地忽略可能出现的任何其他选项。

Svelte 现在已准备好构建您的项目。当需要时，您可以通过在终端会话中输入以下命令来批准它：

npx sv create 

您现在在屏幕上看到的奇怪显示可能是您第一次看到 npm 将包文件下载到项目中。您可能会发现，工作区窗口中的 svelte-dev 文件夹突然绽放出令人印象深刻的子文件夹内容显示，这对您很有启发。这是代表您的“最小”SvelteKit 项目的代码。

打包软件并不总是出现在您的项目中。如果您要安装可能与其他项目共享的有用工具，您可以请求“全局”安装它。您可以通过在 npm 命令中添加“-g”“标志字段”来完成此操作。您将看到终端命令中广泛使用的标志字段。不过，目前，请让您的安装程序软件为您提供使用指导。请 chatGPT 给你一个关于这方面的教程。

Svelte 安装程序现在要求您运行 npm run dev -- --open。尝试一下：

npm install

这将启动 SvelteKit 本地服务器并在其中运行您的项目。本地服务器的任务是在浏览器的端口 5173 上创建“localhost”页面。如果这句话对您来说没有意义，那么您现在将明白它的含义，因为 npm 命令的“-- --open”位会自动将控制权交给您的浏览器并为您提供演示。您的屏幕应如下图所示：

这是一个使用与您在 Post 1.1 中看到的完全相同的 HTML 编码的 Web 应用程序。不同之处在于其内容由 SVelteKit 框架监控。该代码当前位于您的新 VSCode svelte-dev 项目中。让我们找到浏览器屏幕上显示“欢迎使用 SvelteKit”横幅的部分，对其进行更改，看看会发生什么。

回到 VSCode，您的项目在其“工作区”中可见，使用其文件夹/文件层次结构来导航其内容，就像在 Windows 资源管理器中一样。您会发现该项目已经获得了相当令人印象深刻的代码集合！例如，现在有一个包含小文件的 node_modules 文件夹。这是您在 npm 安装过程中下载的所有文件所在的位置。现在找到 src/routes 文件夹中的 page.svelte 文件并单击它。 （它的名称和在 src 文件夹中的位置的重要性将在以后的帖子中阐明 - 现在我们简单地说名称“page.svelte”相当重要）。现在，您将看到 src/routes/ page.svelte 的内容显示在屏幕右侧的 VSCode 编辑窗口中。

欢迎使用 SvelteKit

这里的行应该看起来很熟悉 - 是的，这是显示标题的 HTML 代码。现在将行更改为

Hello there

保存文件（使用常用的 ctrl S 快捷键）并再次查看浏览器。哇，“欢迎使用 SvelteKit”消息已被“你好”消息取代。

因为您使用 npm run dev 启动的 SvelteKit 服务器一直在监视您的项目文件夹，所以每当您更改文件时，服务器都会自动将更改传输到浏览器中的活动应用程序。

这将使开发变得非常有趣！

三、总结

如果您在这篇文章中幸存下来，请给自己一颗金星。您已经成功地让 SvelteKit Web 应用程序在开发模式下运行，同样重要的是，您还创建了 VSCode、npm 和 Node.js“脚手架”，这将使未来的每个 SvelteKit 项目都能顺利启动。

本系列的下一篇文章将向您展示如何使用 Javascript 和 Svelte“语言”为您的网络应用程序添加智能。

后记 1：当事情出错时

弄乱这些东西并不难 - 最有经验的开发人员有时会错误地输入 HTML 标签的名称，并在屏幕上充斥着可怕的错误消息。不同的是，他们以前都见过这一切，知道不要惊慌！作为初学者，当您看到这种情况时，您可能会认为您的计算机已完全损坏，现在必须购买一台新计算机。冷静下来。您可以对此进行排序。

错误将以多种不同的方式发出信号。在 VSCode 中打开的 .js (javascript) 文件中的语法错误将在编辑窗口中标记出来。在下面的示例中，我故意通过删除结束 > 来破坏“最小”项目中标题消息的 HTML 代码。初始的

的标签。

请注意：

• 错误文件及其父文件夹均在文件夹层次结构中以红色突出显示。这意味着代码已损坏，如果运行它，将会抛出错误消息。尝试一下 - 您会发现您的 web 应用程序的本地主机页面在刷新时会显示“500 内部错误”。回到 VSCode 终端窗口，当您保存错误文件时，SvelteKit 服务器也会生成大量错误详细信息。
• 编辑窗口中“错误”的位置已加下划线。当您将鼠标悬停在此处时，您将看到一个工具提示，其中提供错误详细信息
• svelte-dev 项目中的错误和警告总数的“计数”显示在 VSCode 页面底部的蓝色“状态”栏中。

这是一个完美的例子，说明为什么你需要保持冷静。所有这些混乱的背后隐藏着一个完全微不足道的错误

首先，你会发现这并不完全合理。系统错误地突出显示了结论 。标记为错误源。真正的问题在于打开的

被破坏了。标签。一旦你看到这个几次，你会自动想到“哦，标签模式有问题”。学会放松。至少系统识别出了正确的线路。

我的一般做法是，当我的代码出现问题时，我首先开始修复编辑器突出显示的问题。但是会有有时 VSCode 非常满意，但你的浏览器却显示错误。这时您必须查看终端会话中显示的错误消息。这些错误会更加严重，我的建议是深吸一口气，仔细阅读这些消息，并尝试思考它想告诉你什么。如果您仍然遇到困难，请将错误消息粘贴到 chatGPT 中并寻求建议。引用 Stackoverflow 的 Google 搜索也是一个很好的资源。

如果您仍然陷入困境，休息一下，出去散步，呼吸新鲜空气。这会产生巨大的影响。计算的伟大之处在于，当出现问题时，总有一个原因。更好的是，当您找到原因并解决它时，它保持固定。认为自己很幸运——你可能正在尝试解决涉及人的问题，但情况正好相反！ 勇气，我勇敢。您肯定会发现编码问题并解决它。

后记 2：使用 VSCode

当 VSCode 还显示资源管理器面板时，VSCode 编辑面板可能会感觉有点受限。您可能想知道可以通过单击工具栏列左上角的资源管理器图标来关闭和打开资源管理器面板。

同样，请记住，当编辑面板被终端会话覆盖时，您可以使用“ctrl '”快捷方式快速将其关闭。

最后，您会发现了解多个终端窗口可以同时处于活动状态很有用。在这种情况下，终端窗口的菜单栏会显示活动终端的列表，您可以通过单击列表条目在它们之间进行切换。这里的“垃圾箱”图标还可以让您关闭一个窗口，尽管只有当您将终端窗口设置得足够大时，这才可能可见 - 在 VSCode 中，空间始终非常宝贵。

以上是NgSysV.安装 Sveltekit 并创建一个简单的全 HTML Web 应用程序的详细内容。更多信息请关注PHP中文网其他相关文章！