該帖子系列已在 NgateSystems.com 上建立索引。您還可以在那里找到超級(jí)有用的關(guān)鍵字搜索工具。

最后評(píng)論：24 年 11 月

一、簡(jiǎn)介

這篇文章旨在讓您初步了解作為網(wǎng)絡(luò)應(yīng)用程序開(kāi)發(fā)人員的現(xiàn)實(shí)生活。它以一個(gè)簡(jiǎn)單的工作 Web 應(yīng)用程序結(jié)束，但必須從棘手的“安裝”任務(wù)開(kāi)始，您必須協(xié)商才能運(yùn)行它。

雖然這很麻煩，但堅(jiān)持下去。一旦你解決了這些問(wèn)題，你將有機(jī)會(huì)使用 Microsoft 的 VSCode 編輯器來(lái)構(gòu)建一小段 HTML。最后，您將使用 VSCode 終端會(huì)話通過(guò) Sveltekit 本地服務(wù)器在瀏覽器中啟動(dòng)它。

這聽(tīng)起來(lái)不錯(cuò)嗎？然后繼續(xù)閱讀。

2. 安裝

絕對(duì)的初學(xué)者可能會(huì)覺(jué)得這一部分很棘手，因?yàn)樗婕笆褂靡恍┎惶脩粲押玫某绦?。但用不了多久，你就?huì)學(xué)到一些將來(lái)會(huì)反復(fù)使用的基本技能。這是你要做的：

1. 創(chuàng)建項(xiàng)目
2. 安裝 VSCode 并在其中打開(kāi)您的項(xiàng)目
3. 打開(kāi)終端會(huì)話
4. 安裝 Node.js 和 npm
5. 安裝 SvelteKit。

2.1 創(chuàng)建項(xiàng)目

第一步是使用 Windows 文件資源管理器工具創(chuàng)建一個(gè)新項(xiàng)目。您需要為此選擇一個(gè)名稱。我建議您使用小寫字母和連字符并保持名稱簡(jiǎn)短。像 svelte-dev 這樣的東西可能是個(gè)好主意。您還應(yīng)該避免將文件夾放在 Dropbox 或 OneDrive 版本存儲(chǔ)中。 Web 應(yīng)用程序項(xiàng)目往往變得相當(dāng)龐大，并且很容易壓垮通用版本控制系統(tǒng)。無(wú)論如何，VSCode 和 Git 將提供您需要的所有版本控制。

2.2 安裝 VSCode 并將項(xiàng)目添加到其“工作區(qū)”

按照 Visual Studio Code 入門中的說(shuō)明在您的設(shè)備上安裝該軟件。使用桌面圖標(biāo)啟動(dòng)它，并注意 VSCode 屏幕頂部菜單欄中的“文件”條目。單擊此按鈕，選擇“將文件夾添加到工作區(qū)”，導(dǎo)航到項(xiàng)目文件夾位置并選擇/添加它。

此時(shí)，VSCode 屏幕將在其菜單欄下方顯示三列信息：工具欄、顯示“工作區(qū)”內(nèi)容詳細(xì)信息的“資源管理器”面板以及等待您編輯工作區(qū)文件的大空白區(qū)域。

您可能想知道，當(dāng)您只有一個(gè)項(xiàng)目時(shí)，為什么 VSCode 會(huì)給您帶來(lái)“工作區(qū)”概念的負(fù)擔(dān)。這是因?yàn)?，隨著時(shí)間的推移，您將積累大量項(xiàng)目并發(fā)現(xiàn)您想要在它們之間共享代碼。 “工作區(qū)”允許您操作一組項(xiàng)目。您可以通過(guò)右鍵單擊項(xiàng)目并選擇“從工作區(qū)中刪除文件夾”來(lái)從工作區(qū)中刪除項(xiàng)目。如果您關(guān)閉并重新啟動(dòng) VSCode，您會(huì)發(fā)現(xiàn)它已記住您之前的工作區(qū)內(nèi)容設(shè)置并將恢復(fù)它。

由于您將經(jīng)常使用 VSCode，您可能會(huì)考慮將 VSCode“固定”到桌面工具欄。請(qǐng)注意，一旦您將項(xiàng)目添加到工作區(qū)，VSCode 將在重新啟動(dòng)之間保留該項(xiàng)目，直到您使用 r-單擊“從工作區(qū)刪除文件夾”命令明確刪除該文件夾。

2.3 在 VSCode 中打開(kāi)終端會(huì)話

您可以通過(guò)在 VSCode 菜單上選擇“終端 -> 新終端”，然后在出現(xiàn)的列表中單擊您的項(xiàng)目條目，在您的項(xiàng)目上打開(kāi)一個(gè)新的終端會(huì)話。如果“終端”選項(xiàng)在菜單欄上不可見(jiàn)，您會(huì)在“...”溢出區(qū)域中找到它。

“終端”應(yīng)作為子窗口出現(xiàn)在 VSCode 屏幕右側(cè)編輯區(qū)域的底部?？梢酝ㄟ^(guò)單擊并拖動(dòng)頂部和左側(cè)邊框來(lái)調(diào)整其高度和寬度。您會(huì)發(fā)現(xiàn)您還可以再次使用 ctrl' 快捷方式打開(kāi)或關(guān)閉它。目前，它正在等待您在前面帶有項(xiàng)目文件夾的完整地址的行中輸入“終端會(huì)話”命令。

如果您迄今為止的 IT 體驗(yàn)完全是通過(guò)在 Windows (Microsoft) 和 iOS (Mac) 屏幕上使用“點(diǎn)擊和指向”，那么本文中對(duì)使用“終端”會(huì)話的嚴(yán)重依賴可能會(huì)出現(xiàn)作為一種不受歡迎的震驚。

這里的“終端”一詞將您帶回到計(jì)算的早期，早在我們今天使用的“圖形用戶界面”出現(xiàn)之前。然后，開(kāi)發(fā)人員使用“終端”設(shè)備（例如電傳打字機(jī)或“VDU”視覺(jué)顯示單元）通過(guò)鍵入“命令”而不是單擊按鈕來(lái)發(fā)出操作系統(tǒng)指令。這些“命令外殼”界面對(duì)于系統(tǒng)程序員來(lái)說(shuō)仍然具有很大的優(yōu)勢(shì)，因?yàn)樗鼈円子谠O(shè)置并且高度靈活。因此，終端會(huì)話在開(kāi)發(fā)過(guò)程中繼續(xù)廣泛使用。當(dāng)然，如果您是在“點(diǎn)擊”界面上長(zhǎng)大的，您會(huì)認(rèn)為它們是一種倒退。但您很快就會(huì)發(fā)現(xiàn)它們運(yùn)行良好，并且無(wú)論如何都會(huì)為您不斷增長(zhǎng)的開(kāi)發(fā)技能范圍添加另一個(gè)有用的構(gòu)建塊。

人們可以寫一本關(guān)于終端命令的書，但現(xiàn)在，您只需要了解一些基本事實(shí)。首先，你會(huì)發(fā)現(xiàn)無(wú)法使用鼠標(biāo)來(lái)編輯終端命令。如果您在命令中間發(fā)現(xiàn)錯(cuò)誤，則必須使用“Backspace”鍵刪除后續(xù)內(nèi)容并重新輸入。但這種不便被以下事實(shí)所抵消：VSCode 中使用的默認(rèn) Powershell 終端會(huì)話會(huì)保留您使用的命令的歷史記錄，并允許您通過(guò)重復(fù)按向上箭頭鍵直到彈出您想要的命令來(lái)引用上一個(gè)命令。向下箭頭鍵可反轉(zhuǎn)該過(guò)程。

2.4 安裝 Node.js 和 npm

您可能已經(jīng)感覺(jué)有點(diǎn)累了，但堅(jiān)持下去。您即將開(kāi)始使用 SvelteKit。

“問(wèn)題”是 SvelteKit 作為“包”在互聯(lián)網(wǎng)上分發(fā)。 SvelteKit 包的安裝需要“包管理器”。什么是包，什么是包管理器？

“包”是一個(gè)整齊捆綁的代碼文件集合，仔細(xì)地標(biāo)記了版本號(hào)，并附有其對(duì)其他包的依賴關(guān)系的詳細(xì)信息。現(xiàn)代軟件開(kāi)發(fā)實(shí)踐使用包的層次結(jié)構(gòu)來(lái)共享有用的代碼組件。

“包管理器”是一種工具，可讓您通過(guò)解壓包的代碼內(nèi)容并將其復(fù)制到項(xiàng)目文件夾中來(lái)將包“安裝”到項(xiàng)目中。包管理器檢查與可能已安裝的任何其他包的兼容性。

您將在此處使用的包管理器稱為 npm（節(jié)點(diǎn)包管理器）。包管理要求很高，因此可以使用替代管理器來(lái)滿足特殊情況。但 npm 包管理器是標(biāo)準(zhǔn)選擇，在這里推薦。當(dāng)您發(fā)現(xiàn)需要包含其他組件時(shí)，您將在項(xiàng)目開(kāi)發(fā)過(guò)程中重復(fù)使用 npm。

稍微跳轉(zhuǎn)一下，一旦安裝了 npm 包管理器及其運(yùn)行時(shí)環(huán)境，您就可以使用它來(lái)將“my-package”包安裝到您的項(xiàng)目中。您可以通過(guò)在 VSCode 終端會(huì)話中啟動(dòng) npm create my-package 這樣的命令來(lái)完成此操作。這會(huì)將“my-package”庫(kù)文件下載到項(xiàng)目的節(jié)點(diǎn)模塊文件夾中。

但是有一個(gè)障礙 - npm 需要“Node.js 運(yùn)行時(shí)環(huán)境”。所以，這個(gè)也必須安裝。

好消息是，至少對(duì)于 Windows 用戶來(lái)說(shuō)，Node.js 是通過(guò)下載并打開(kāi)標(biāo)準(zhǔn) msi（微軟安裝）文件來(lái)安裝的。更好的是，由此啟動(dòng)的安裝過(guò)程還可以讓您安裝 npm。

然而，運(yùn)行這個(gè)程序?qū)τ诔鯇W(xué)者來(lái)說(shuō)是一個(gè)很大的挑戰(zhàn)?；镜南螺d安排記錄在 https://nodejs.org/en 的 Run JavaScript Everywhere 中，但這對(duì)于操作說(shuō)明來(lái)說(shuō)非常簡(jiǎn)單。您可能會(huì)發(fā)現(xiàn)查看如何在 Windows 上安裝 Node.js 和 NPM 中更詳細(xì)的說(shuō)明很有幫助。慢慢來(lái)。如果出現(xiàn)問(wèn)題，您只需卸載 Node.js 并重新開(kāi)始即可。我能給您的最好建議是使用程序提供的標(biāo)準(zhǔn)默認(rèn)設(shè)置 - 覆蓋僅適用于專家。

2.5 安裝SvelteKit

終于，你能夠取得一些進(jìn)步了！完成此階段后，您將獲得一個(gè)在瀏覽器中運(yùn)行的簡(jiǎn)單演示 SvelteKit 頁(yè)面作為獎(jiǎng)勵(lì)。

1. 像以前一樣在 VSCode 中為您的項(xiàng)目打開(kāi)一個(gè)終端會(huì)話，然后運(yùn)行以下 npx 命令：

npx sv create 

*順便說(shuō)一句，npx 是嵌入在 npm 中的“包運(yùn)行器”工具 - 它隨 npm 自動(dòng)安裝

自 2024 年 11 月起，這將啟動(dòng) SvelteKit 對(duì)話框，引導(dǎo)您完成使用 Svelte 5 配置項(xiàng)目的過(guò)程。

順便說(shuō)一句，請(qǐng)放心，如果此過(guò)程出現(xiàn)問(wèn)題并且您想重新開(kāi)始，您所要做的就是刪除項(xiàng)目文件夾的全部?jī)?nèi)容并再次嘗試。另請(qǐng)注意，npm 安裝在檢查構(gòu)建到項(xiàng)目中的文件中是否可能存在不兼容性時(shí)，通常會(huì)顯示令人擔(dān)憂的警告消息列表。作為初學(xué)者，這些不太可能與您相關(guān)，因此我建議您忽略它們。

Svelte 的第一個(gè)問(wèn)題是“我們應(yīng)該在哪里創(chuàng)建您的項(xiàng)目？”。由于您的終端會(huì)話已在項(xiàng)目文件夾中打開(kāi)，因此您只需在此處按回車鍵即可。

現(xiàn)在 Svelte 想知道它應(yīng)該創(chuàng)建什么風(fēng)格的項(xiàng)目。我希望你在這里選擇“最小”。在終端會(huì)話中執(zhí)行此操作的過(guò)程有點(diǎn)尷尬，因?yàn)槟鸁o(wú)法像在網(wǎng)頁(yè)上那樣使用鼠標(biāo)來(lái)切換復(fù)選框。您可以使用向下箭頭鍵將自己定位在“最小”行，然后按回車鍵來(lái)表明您的偏好

現(xiàn)在 Svelte 想知道您是否想使用 TypeScript 檢查功能。當(dāng)您開(kāi)發(fā)復(fù)雜的生產(chǎn)級(jí) Web 應(yīng)用程序時(shí)，此高級(jí) Javascript 擴(kuò)展對(duì)您至關(guān)重要（它控制您在 Javascript 中使用變量類型并確保一致性）。但你在這里不需要這個(gè)，你的學(xué)習(xí)曲線已經(jīng)呈指數(shù)增長(zhǎng)，所以我建議你通過(guò)按兩次向下箭頭然后按回車鍵來(lái)選擇“否”。

然后，Svelte 想知道您是否愿意添加“其他選項(xiàng)”。列表頂部顯示的 ESLint 語(yǔ)法檢查工具可能會(huì)有所幫助。有時(shí)這可能是一個(gè)“吵鬧”的麻煩，警告您有關(guān)您不是特別感興趣的問(wèn)題。但是，總的來(lái)說(shuō)，我建議您通過(guò)按空格鍵和返回鍵來(lái)接受它。

最后，Svelte 會(huì)詢問(wèn)您要使用哪個(gè)包管理器。選擇 npm

您可以安全地忽略可能出現(xiàn)的任何其他選項(xiàng)。

Svelte 現(xiàn)在已準(zhǔn)備好構(gòu)建您的項(xiàng)目。當(dāng)需要時(shí)，您可以通過(guò)在終端會(huì)話中輸入以下命令來(lái)批準(zhǔn)它：

npx sv create 

您現(xiàn)在在屏幕上看到的奇怪顯示可能是您第一次看到 npm 將包文件下載到項(xiàng)目中。您可能會(huì)發(fā)現(xiàn)，工作區(qū)窗口中的 svelte-dev 文件夾突然綻放出令人印象深刻的子文件夾內(nèi)容顯示，這對(duì)您很有啟發(fā)。這是代表您的“最小”SvelteKit 項(xiàng)目的代碼。

打包軟件并不總是出現(xiàn)在您的項(xiàng)目中。如果您要安裝可能與其他項(xiàng)目共享的有用工具，您可以請(qǐng)求“全局”安裝它。您可以通過(guò)在 npm 命令中添加“-g”“標(biāo)志字段”來(lái)完成此操作。您將看到終端命令中廣泛使用的標(biāo)志字段。不過(guò)，目前，請(qǐng)讓您的安裝程序軟件為您提供使用指導(dǎo)。請(qǐng) chatGPT 給你一個(gè)關(guān)于這方面的教程。

Svelte 安裝程序現(xiàn)在要求您運(yùn)行 npm run dev -- --open。嘗試一下：

npm install

這將啟動(dòng) SvelteKit 本地服務(wù)器并在其中運(yùn)行您的項(xiàng)目。本地服務(wù)器的任務(wù)是在瀏覽器的端口 5173 上創(chuàng)建“l(fā)ocalhost”頁(yè)面。如果這句話對(duì)您來(lái)說(shuō)沒(méi)有意義，那么您現(xiàn)在將明白它的含義，因?yàn)?npm 命令的“-- --open”位會(huì)自動(dòng)將控制權(quán)交給您的瀏覽器并為您提供演示。您的屏幕應(yīng)如下圖所示：

這是一個(gè)使用與您在 Post 1.1 中看到的完全相同的 HTML 編碼的 Web 應(yīng)用程序。不同之處在于其內(nèi)容由 SVelteKit 框架監(jiān)控。該代碼當(dāng)前位于您的新 VSCode svelte-dev 項(xiàng)目中。讓我們找到瀏覽器屏幕上顯示“歡迎使用 SvelteKit”橫幅的部分，對(duì)其進(jìn)行更改，看看會(huì)發(fā)生什么。

回到 VSCode，您的項(xiàng)目在其“工作區(qū)”中可見(jiàn)，使用其文件夾/文件層次結(jié)構(gòu)來(lái)導(dǎo)航其內(nèi)容，就像在 Windows 資源管理器中一樣。您會(huì)發(fā)現(xiàn)該項(xiàng)目已經(jīng)獲得了相當(dāng)令人印象深刻的代碼集合！例如，現(xiàn)在有一個(gè)包含小文件的 node_modules 文件夾。這是您在 npm 安裝過(guò)程中下載的所有文件所在的位置?，F(xiàn)在找到 src/routes 文件夾中的 page.svelte 文件并單擊它。 （它的名稱和在 src 文件夾中的位置的重要性將在以后的帖子中闡明 - 現(xiàn)在我們簡(jiǎn)單地說(shuō)名稱“page.svelte”相當(dāng)重要）?，F(xiàn)在，您將看到 src/routes/ page.svelte 的內(nèi)容顯示在屏幕右側(cè)的 VSCode 編輯窗口中。

歡迎使用 SvelteKit

這里的行應(yīng)該看起來(lái)很熟悉 - 是的，這是顯示標(biāo)題的 HTML 代碼。現(xiàn)在將行更改為

Hello there

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

因?yàn)槟褂?npm run dev 啟動(dòng)的 SvelteKit 服務(wù)器一直在監(jiān)視您的項(xiàng)目文件夾，所以每當(dāng)您更改文件時(shí)，服務(wù)器都會(huì)自動(dòng)將更改傳輸?shù)綖g覽器中的活動(dòng)應(yīng)用程序。

這將使開(kāi)發(fā)變得非常有趣！

三、總結(jié)

如果您在這篇文章中幸存下來(lái)，請(qǐng)給自己一顆金星。您已經(jīng)成功地讓 SvelteKit Web 應(yīng)用程序在開(kāi)發(fā)模式下運(yùn)行，同樣重要的是，您還創(chuàng)建了 VSCode、npm 和 Node.js“腳手架”，這將使未來(lái)的每個(gè) SvelteKit 項(xiàng)目都能順利啟動(dòng)。

本系列的下一篇文章將向您展示如何使用 Javascript 和 Svelte“語(yǔ)言”為您的網(wǎng)絡(luò)應(yīng)用程序添加智能。

后記 1：當(dāng)事情出錯(cuò)時(shí)

弄亂這些東西并不難 - 最有經(jīng)驗(yàn)的開(kāi)發(fā)人員有時(shí)會(huì)錯(cuò)誤地輸入 HTML 標(biāo)簽的名稱，并在屏幕上充斥著可怕的錯(cuò)誤消息。不同的是，他們以前都見(jiàn)過(guò)這一切，知道不要驚慌！作為初學(xué)者，當(dāng)您看到這種情況時(shí)，您可能會(huì)認(rèn)為您的計(jì)算機(jī)已完全損壞，現(xiàn)在必須購(gòu)買一臺(tái)新計(jì)算機(jī)。冷靜下來(lái)。您可以對(duì)此進(jìn)行排序。

錯(cuò)誤將以多種不同的方式發(fā)出信號(hào)。在 VSCode 中打開(kāi)的 .js (javascript) 文件中的語(yǔ)法錯(cuò)誤將在編輯窗口中標(biāo)記出來(lái)。在下面的示例中，我故意通過(guò)刪除結(jié)束 > 來(lái)破壞“最小”項(xiàng)目中標(biāo)題消息的 HTML 代碼。初始的

的標(biāo)簽。

請(qǐng)注意：

• 錯(cuò)誤文件及其父文件夾均在文件夾層次結(jié)構(gòu)中以紅色突出顯示。這意味著代碼已損壞，如果運(yùn)行它，將會(huì)拋出錯(cuò)誤消息。嘗試一下 - 您會(huì)發(fā)現(xiàn)您的 web 應(yīng)用程序的本地主機(jī)頁(yè)面在刷新時(shí)會(huì)顯示“500 內(nèi)部錯(cuò)誤”。回到 VSCode 終端窗口，當(dāng)您保存錯(cuò)誤文件時(shí)，SvelteKit 服務(wù)器也會(huì)生成大量錯(cuò)誤詳細(xì)信息。
• 編輯窗口中“錯(cuò)誤”的位置已加下劃線。當(dāng)您將鼠標(biāo)懸停在此處時(shí)，您將看到一個(gè)工具提示，其中提供錯(cuò)誤詳細(xì)信息
• svelte-dev 項(xiàng)目中的錯(cuò)誤和警告總數(shù)的“計(jì)數(shù)”顯示在 VSCode 頁(yè)面底部的藍(lán)色“狀態(tài)”欄中。

這是一個(gè)完美的例子，說(shuō)明為什么你需要保持冷靜。所有這些混亂的背后隱藏著一個(gè)完全微不足道的錯(cuò)誤

首先，你會(huì)發(fā)現(xiàn)這并不完全合理。系統(tǒng)錯(cuò)誤地突出顯示了結(jié)論 。標(biāo)記為錯(cuò)誤源。真正的問(wèn)題在于打開(kāi)的

被破壞了。標(biāo)簽。一旦你看到這個(gè)幾次，你會(huì)自動(dòng)想到“哦，標(biāo)簽?zāi)Ｊ接袉?wèn)題”。學(xué)會(huì)放松。至少系統(tǒng)識(shí)別出了正確的線路。

我的一般做法是，當(dāng)我的代碼出現(xiàn)問(wèn)題時(shí)，我首先開(kāi)始修復(fù)編輯器突出顯示的問(wèn)題。但是會(huì)有有時(shí) VSCode 非常滿意，但你的瀏覽器卻顯示錯(cuò)誤。這時(shí)您必須查看終端會(huì)話中顯示的錯(cuò)誤消息。這些錯(cuò)誤會(huì)更加嚴(yán)重，我的建議是深吸一口氣，仔細(xì)閱讀這些消息，并嘗試思考它想告訴你什么。如果您仍然遇到困難，請(qǐng)將錯(cuò)誤消息粘貼到 chatGPT 中并尋求建議。引用 Stackoverflow 的 Google 搜索也是一個(gè)很好的資源。

如果您仍然陷入困境，休息一下，出去散步，呼吸新鮮空氣。這會(huì)產(chǎn)生巨大的影響。計(jì)算的偉大之處在于，當(dāng)出現(xiàn)問(wèn)題時(shí)，總有一個(gè)原因。更好的是，當(dāng)您找到原因并解決它時(shí)，它保持固定。認(rèn)為自己很幸運(yùn)——你可能正在嘗試解決涉及人的問(wèn)題，但情況正好相反！ 勇氣，我勇敢。您肯定會(huì)發(fā)現(xiàn)編碼問(wèn)題并解決它。

后記 2：使用 VSCode

當(dāng) VSCode 還顯示資源管理器面板時(shí)，VSCode 編輯面板可能會(huì)感覺(jué)有點(diǎn)受限。您可能想知道可以通過(guò)單擊工具欄列左上角的資源管理器圖標(biāo)來(lái)關(guān)閉和打開(kāi)資源管理器面板。

同樣，請(qǐng)記住，當(dāng)編輯面板被終端會(huì)話覆蓋時(shí)，您可以使用“ctrl '”快捷方式快速將其關(guān)閉。

最后，您會(huì)發(fā)現(xiàn)了解多個(gè)終端窗口可以同時(shí)處于活動(dòng)狀態(tài)很有用。在這種情況下，終端窗口的菜單欄會(huì)顯示活動(dòng)終端的列表，您可以通過(guò)單擊列表?xiàng)l目在它們之間進(jìn)行切換。這里的“垃圾箱”圖標(biāo)還可以讓您關(guān)閉一個(gè)窗口，盡管只有當(dāng)您將終端窗口設(shè)置得足夠大時(shí)，這才可能可見(jiàn) - 在 VSCode 中，空間始終非常寶貴。

以上是NgSysV.安裝 Sveltekit 并創(chuàng)建一個(gè)簡(jiǎn)單的全 HTML Web 應(yīng)用程序的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！