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

最后評論：24 年 11 月

一、簡介

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

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

這聽起來不錯嗎？然后繼續(xù)閱讀。

2. 安裝

絕對的初學(xué)者可能會覺得這一部分很棘手，因為它涉及使用一些不太用戶友好的程序。但用不了多久，你就會學(xué)到一些將來會反復(fù)使用的基本技能。這是你要做的：

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

2.1 創(chuàng)建項目

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

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

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

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

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

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

2.3 在 VSCode 中打開終端會話

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

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

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

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

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

2.4 安裝 Node.js 和 npm

您可能已經(jīng)感覺有點累了，但堅持下去。您即將開始使用 SvelteKit。

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

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

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

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

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

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

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

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

2.5 安裝SvelteKit

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

1. 像以前一樣在 VSCode 中為您的項目打開一個終端會話，然后運行以下 npx 命令：

npx sv create 

*順便說一句，npx 是嵌入在 npm 中的“包運行器”工具 - 它隨 npm 自動安裝

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

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

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

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

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

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

最后，Svelte 會詢問您要使用哪個包管理器。選擇 npm

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

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

npx sv create 

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

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

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

npm install

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

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

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

歡迎使用 SvelteKit

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

Hello there

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

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

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

三、總結(jié)

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

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

后記 1：當(dāng)事情出錯時

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

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

的標(biāo)簽。

請注意：

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

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

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

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

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

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

后記 2：使用 VSCode

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

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

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

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