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中文網其他相關文章！