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

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

一、簡介

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

雖然這很麻煩，但堅(jiān)持下去。一旦你解決了這些問題，你將有機(jī)會(huì)使用 Microsoft 的 VSCode 編輯器來建立一小段 HTML。最後，您將使用 VSCode 終端會(huì)話透過 Sveltekit 本機(jī)伺服器在瀏覽器中啟動(dòng)它。

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

2. 安裝

絕對的初學(xué)者可能會(huì)覺得這一部分很棘手，因?yàn)樗婕笆褂靡恍┎惶脩粲押玫某淌健５貌涣硕嗑?，你就?huì)學(xué)到一些將來會(huì)重複使用的基本技能。這是你要做的：

1. 建立專案
2. 安裝 VSCode 並在其中開啟您的專案
3. 開啟終端機(jī)會(huì)話
4. 安裝 Node.js 和 npm
5. 安裝 SvelteKit。

2.1 建立項(xiàng)目

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

2.2 安裝 VSCode 並將專案新增至其“工作區(qū)”

按照 Visual Studio Code 入門中的說明在您的裝置上安裝軟體。使用桌面圖示啟動(dòng)它，並注意 VSCode 螢?zāi)豁敳抗δ鼙砹兄械摹拔募表?xiàng)目。點(diǎn)擊此按鈕，選擇“將資料夾新增至工作區(qū)”，導(dǎo)航至專案資料夾位置並選擇/新增它。

此時(shí)，VSCode 畫面將在其功能表列下方顯示三列資訊：工具列、顯示「工作區(qū)」內(nèi)容詳細(xì)資訊的「資源管理器」面板以及等待您編輯工作區(qū)文件的大空白區(qū)域。

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

由於您將經(jīng)常使用 VSCode，您可能會(huì)考慮將 VSCode「固定」到桌面工具列。請注意，一旦您將項(xiàng)目新增至工作區(qū)，VSCode 將在重新啟動(dòng)之間保留該項(xiàng)目，直到您使用 r-按一下「從工作區(qū)刪除資料夾」命令明確刪除該資料夾。

2.3 在 VSCode 中開啟終端會(huì)話

您可以透過在 VSCode 選單上選擇“終端機(jī) -> 新終端機(jī)”，然後在出現(xiàn)的清單中按一下您的專案項(xiàng)目，在您的專案上開啟新的終端會(huì)話。如果「終端」選項(xiàng)在功能表列上不可見，您會(huì)在「...」溢位區(qū)域中找到它。

「終端」應(yīng)作為子視窗出現(xiàn)在 VSCode 螢?zāi)挥覀?cè)編輯區(qū)域的底部?？梢酝高^點(diǎn)擊並拖曳頂部和左側(cè)邊框來調(diào)整其高度和寬度。您會(huì)發(fā)現(xiàn)您也可以再次使用 ctrl' 捷徑開啟或關(guān)閉它。目前，它正在等待您在前面帶有項(xiàng)目資料夾的完整地址的行中輸入“終端會(huì)話”命令。

如果您迄今為止的IT 體驗(yàn)完全是透過在Windows (Microsoft) 和iOS (Mac) 螢?zāi)簧鲜褂谩包c(diǎn)擊和指向”，那麼本文中對使用“終端”會(huì)話的嚴(yán)重依賴可能會(huì)出現(xiàn)作為一種不受歡迎的震驚。

這裡的「終端」一詞將您帶回計(jì)算的早期，早在我們今天使用的「圖形使用者介面」出現(xiàn)之前。然後，開發(fā)人員使用「終端」裝置（例如電傳打字機(jī)或「VDU」視覺顯示單元）透過鍵入「命令」而不是點(diǎn)擊按鈕來發(fā)出作業(yè)系統(tǒng)指令。這些「命令外殼」介面對於系統(tǒng)程式設(shè)計(jì)師來說仍然具有很大的優(yōu)勢，因?yàn)樗鼈円嘴对O(shè)定且高度靈活。因此，終端會(huì)話在開發(fā)過程中繼續(xù)廣泛使用。當(dāng)然，如果您是在「點(diǎn)擊」介面上長大的，您會(huì)認(rèn)為它們是一種倒退。但您很快就會(huì)發(fā)現(xiàn)它們運(yùn)作良好，並且無論如何都會(huì)為您不斷增長的開發(fā)技能範(fàn)圍添加另一個(gè)有用的構(gòu)建塊。

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

2.4 安裝 Node.js 和 npm

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

「問題」是 SvelteKit 作為「包」在網(wǎng)路上分發(fā)。 SvelteKit 套件的安裝需要「套件管理器」。什麼是包，什麼是包管理器？

「套件」是一個(gè)整齊捆綁的程式碼檔案集合，仔細(xì)地標(biāo)記了版本號(hào)，並附有其對其他套件的依賴關(guān)係的詳細(xì)資訊?，F(xiàn)代軟體開發(fā)實(shí)踐使用套件的層次結(jié)構(gòu)來共享有用的程式碼元件。

「套件管理器」是一種工具，可讓您透過解壓縮套件的程式碼內(nèi)容並將其複製到專案資料夾中來將套件「安裝」到專案中。套件管理器檢查與可能已安裝的任何其他套件的相容性。

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

稍微跳轉(zhuǎn)一下，一旦安裝了 npm 套件管理器及其執(zhí)行時(shí)間環(huán)境，您就可以使用它來將「my-package」套件安裝到您的專案中。您可以透過在 VSCode 終端會(huì)話中啟動(dòng) npm create my-package 這樣的命令來完成此操作。這會(huì)將“my-package”庫檔案下載到專案的節(jié)點(diǎn)模組資料夾中。

但是有一個(gè)障礙 - npm 需要「Node.js 執(zhí)行時(shí)間環(huán)境」。所以，這個(gè)也必須安裝。

好消息是，至少對 Windows 使用者來說，Node.js 是透過下載並開啟標(biāo)準(zhǔn) msi（微軟安裝）檔案來安裝的。更好的是，由此啟動(dòng)的安裝過程還可以讓您安裝 npm。

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

2.5 安裝SvelteKit

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

1. 像以前一樣在 VSCode 中為您的專案開啟終端會(huì)話，然後執(zhí)行以下 npx 命令：

npx sv create 

*順便說一句，npx 是嵌入在 npm 中的「套件運(yùn)行器」工具 - 它隨 npm 自動(dòng)安裝

自 2024 年 11 月起，這將啟動(dòng) SvelteKit 對話框，引導(dǎo)您完成使用 Svelte 5 設(shè)定專案的流程。

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

Svelte 的第一個(gè)問題是「我們應(yīng)該在哪裡建立您的專案？」。由於您的終端機(jī)會(huì)話已在專案資料夾中打開，因此您只需在此處按回車鍵即可。

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

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

然後，Svelte 想知道您是否願(yuàn)意添加「其他選項(xiàng)」。清單頂部顯示的 ESLint 語法檢查工具可能會(huì)有所幫助。有時(shí)這可能是一個(gè)「吵鬧」的麻煩，警告您有關(guān)您不是特別感興趣的問題。但是，總的來說，我建議您按空格鍵和返回鍵來接受它。

最後，Svelte 會(huì)詢問您要使用哪個(gè)套件管理器。選擇 npm

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

Svelte 現(xiàn)在已準(zhǔn)備好建立您的專案。當(dāng)需要時(shí)，您可以透過在終端機(jī)會(huì)話中輸入以下命令來批準(zhǔn)它：

npx sv create 

您現(xiàn)在在螢?zāi)簧峡吹降钠婀诛@示可能是您第一次看到 npm 將套件檔案下載到專案中。您可能會(huì)發(fā)現(xiàn)，工作區(qū)視窗中的 svelte-dev 資料夾突然綻放出令人印象深刻的子資料夾內(nèi)容顯示，這對您很有啟發(fā)。這是代表您的「最小」SvelteKit 專案的程式碼。

打包軟體並不總是出現(xiàn)在您的專案中。如果您要安裝可能與其他項(xiàng)目共用的有用工具，您可以要求「全域」安裝它。您可以透過在 npm 命令中新增“-g”“標(biāo)誌欄位”來完成此操作。您將看到終端命令中廣泛使用的標(biāo)誌欄位。不過，目前，請讓您的安裝程式軟體為您提供使用指導(dǎo)。請 chatGPT 給你一個(gè)關(guān)於這方面的教學(xué)。

Svelte 安裝程式現(xiàn)在要求您執(zhí)行 npm run dev -- --open。試試看：

npm install

這將啟動(dòng) SvelteKit 本機(jī)伺服器並在其中執(zhí)行您的專案。本機(jī)伺服器的任務(wù)是在瀏覽器的連接埠 5173 上建立「localhost」頁面。如果這句話對您來說沒有意義，那麼您現(xiàn)在將明白它的含義，因?yàn)閚pm 命令的“-- --open”位會(huì)自動(dòng)將控制權(quán)交給您的瀏覽器並為您提供演示。您的螢?zāi)粦?yīng)如下圖所示：

這是一個(gè)使用與您在 Post 1.1 中看到的完全相同的 HTML 編碼的 Web 應(yīng)用程式。不同之處在於其內(nèi)容由 SVelteKit 框架監(jiān)控。該程式碼目前位於您的新 VSCode svelte-dev 專案中。讓我們找到瀏覽器畫面上顯示「歡迎使用 SvelteKit」橫幅的部分，對其進(jìn)行更改，看看會(huì)發(fā)生什麼。

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

歡迎使用 SvelteKit

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

Hello there

儲(chǔ)存檔案（使用常用的 ctrl S 快捷鍵）並再次查看瀏覽器。哇，「歡迎使用 SvelteKit」訊息已被「你好」訊息取代。

因?yàn)槟褂?npm run dev 啟動(dòng)的 SvelteKit 伺服器一直在監(jiān)視您的專案資料夾，所以每當(dāng)您更改檔案時(shí)，伺服器都會(huì)自動(dòng)將變更傳輸?shù)綖g覽器中的活動(dòng)應(yīng)用程式。

這會(huì)讓開發(fā)變得非常有趣！

三、總結(jié)

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

本系列的下一篇文章將向您展示如何使用 Javascript 和 Svelte「語言」為您的網(wǎng)頁應(yīng)用程式添加智慧。

後記 1：事情出錯(cuò)時(shí)

弄亂這些東西並不難 - 最有經(jīng)驗(yàn)的開發(fā)人員有時(shí)會(huì)錯(cuò)誤地輸入 HTML 標(biāo)籤的名稱，並在螢?zāi)簧铣涑庵膳碌腻e(cuò)誤訊息。不同的是，他們以前都看過這一切，知道不要驚慌！作為初學(xué)者，當(dāng)您看到這種情況時(shí)，您可能會(huì)認(rèn)為您的電腦已完全損壞，現(xiàn)在必須購買一臺(tái)新電腦。冷靜下來。您可以對此進(jìn)行排序。

錯(cuò)誤將以多種不同的方式發(fā)出訊號(hào)。在 VSCode 中開啟的 .js (javascript) 檔案中的語法錯(cuò)誤將在編輯視窗中標(biāo)記出來。在下面的範(fàn)例中，我故意透過刪除結(jié)束 > 來破壞「最小」項(xiàng)目中標(biāo)題訊息的 HTML 程式碼。初始的

的標(biāo)籤。

請注意：

• 錯(cuò)誤檔案及其父資料夾皆在資料夾層次結(jié)構(gòu)中以紅色突出顯示。這意味著代碼已損壞，如果運(yùn)行它，將會(huì)拋出錯(cuò)誤訊息。試試看 - 您會(huì)發(fā)現(xiàn)您的 web 應(yīng)用程式的本機(jī)主機(jī)頁面在刷新時(shí)會(huì)顯示「500 內(nèi)部錯(cuò)誤」?；氐?VSCode 終端窗口，當(dāng)您儲(chǔ)存錯(cuò)誤檔案時(shí)，SvelteKit 伺服器也會(huì)產(chǎn)生大量錯(cuò)誤詳細(xì)資訊。
• 編輯視窗中「錯(cuò)誤」的位置已加底線。當(dāng)您將滑鼠懸停在此處時(shí)，您將看到一個(gè)工具提示，其中提供錯(cuò)誤詳細(xì)資訊
• svelte-dev 項(xiàng)目中的錯(cuò)誤和警告總數(shù)的「計(jì)數(shù)」顯示在 VSCode 頁面底部的藍(lán)色「狀態(tài)」欄中。

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

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

被破壞了。標(biāo)籤。一旦你看到這個(gè)幾次，你會(huì)自動(dòng)想到「哦，標(biāo)籤模式有問題」。學(xué)會(huì)放鬆。至少系統(tǒng)辨識(shí)出了正確的線路。

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

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

後記 2：使用 VSCode

當(dāng) VSCode 也顯示資源管理器面板時(shí)，VSCode 編輯面板可能會(huì)感覺有點(diǎn)受限。您可能想知道可以透過點(diǎn)擊工具列列左上角的資源管理器圖示來關(guān)閉和開啟資源管理器面板。

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

最後，您會(huì)發(fā)現(xiàn)了解多個(gè)終端視窗可以同時(shí)處於活動(dòng)狀態(tài)很有用。在這種情況下，終端機(jī)視窗的選單列會(huì)顯示活動(dòng)終端機(jī)的列表，您可以透過點(diǎn)擊列表項(xiàng)目在它們之間進(jìn)行切換。這裡的「垃圾箱」圖示還可以讓您關(guān)閉一個(gè)窗口，儘管只有當(dāng)您將終端窗口設(shè)置得足夠大時(shí)，這才可能可見 - 在 VSCode 中，空間始終非常寶貴。

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