在 Windows 上開始使用 Nuxt.js

一份指南協助您安裝 Nuxt.js Web 架構，並在 Windows 上快速運行。

Nuxt.js 是一種架構，可根據 Vue.js、Node.js、Webpack 和 Babel.js來建立伺服器轉譯的 JavaScript 應用程式。 它受到 Next.js的啟發。 它基本上是 Vue 的專案樣板。 就像 Next.js一樣，它會以注意最佳做法來製作，並可讓您以簡單、一致的方式建立「通用」Web 應用程式，幾乎沒有任何設定。 這些「通用」伺服器轉譯的 Web 應用程式有時也稱為「同型」，這表示程式代碼會在客戶端與伺服器之間共用。

若要深入瞭解 Vue，請參閱 Vue 概觀 頁面。

先決條件

本指南假設您已經完成設定您的 Node.js 開發環境的步驟，包括：

• 安裝適用於Linux的 Windows 子系統 （WSL），包括Linux發行版（例如Ubuntu），並確定它以WSL 2模式執行。 您可以透過開啟 PowerShell 並輸入：wsl -l -v 來檢查。
• 在 WSL 2上安裝 Node.js：這包括版本管理員、套件管理員、Visual Studio Code 和遠端開發延伸模組。

在使用 NodeJS 應用程式時，建議您使用適用於 Linux 的 Windows 子系統，以提升效能速度、系統呼叫相容性，以及在執行 Linux 伺服器或 Docker 容器時進行模仿。

這很重要

使用 WSL 安裝 Linux 發行版將會建立用來儲存檔案的目錄：\\wsl\Ubuntu-20.04（以您所使用的任何 Linux 發行版取代 Ubuntu-20.04）。 若要在 Windows 檔案總管中開啟此目錄，請開啟 WSL 命令列，使用 cd ~ 選取您的主目錄，然後輸入 explorer.exe .。請勿在掛接的 C 磁碟機 (/mnt/c/Users/yourname$) 上安裝 NodeJS 或儲存您將使用的檔案。 這樣做會大幅降低安裝和建置時間的速度。

安裝 Nuxt.js

若要安裝 Nuxt.js，您必須回答一系列關於您想要安裝的整合式伺服器端架構、UI 架構、測試架構、模式、模組和 linter 的一系列問題：

1. 開啟 WSL 命令列 （即Ubuntu）。

2. 建立新的專案資料夾：mkdir NuxtProjects，並進入該目錄：cd NuxtProjects。

3. 安裝 Nuxt.js 並建立專案（將 'my-nuxt-app' 替換為您希望命名應用程式的名稱）：npm create nuxt-app my-nuxt-app

4. Nuxt.js 安裝程式現在會詢問下列問題：

   • 項目名稱：my-nuxtjs-app
   • 專案描述：我的 Nuxt.js 應用程式描述。
   • 作者名稱：我使用我的 GitHub 別名。
   • 選擇套件管理工具：Yarn 或 NPM，我們在範例中使用 NPM。
   • 選擇 UI 架構：None、Ant Design Vue、Bootstrap Vue 等。 讓我們針對此範例選擇 Vuetify，但 Vue 社群建立了一個很好的 摘要，來比較這些 UI 框架，幫助您選擇最適合您專案的選擇。
   • 選擇自定義伺服器架構：None、AdonisJs、Express、Fastify 等。 讓我們選擇 無 作為此範例，但你能在 Dev.to 網站找到 2019-2020 伺服器架構比較。
   • 選擇 Nuxt.js 模組（使用空格鍵來選取模組，或按 Enter 鍵如果您不選擇的話）：Axios（用於簡化 HTTP 請求）或 PWA 支援（用於新增 service-worker、manifest.json 檔案等）。 讓我們不要新增此範例的模組。
   • 選擇 linting 工具：ESLint、Prettier、Lint 已暫存檔案。 讓我們選擇 ESLint （分析程式碼的工具，並警告您潛在的錯誤）。
   • 選擇測試架構： None、Jest、AVA。 讓我們選擇 無，因為我們不會在本快速入門中討論測試。
   • 選擇轉譯模式： 通用 （SSR） 或單頁應用程式 （SPA）。 讓我們選擇 SSR 通用範例，但 Nuxt.js 文件 提到一些差異——SSR 需要正在運行的 Node.js 伺服器來伺服器端渲染您的應用程式，而 SPA 則適用於靜態主機。
   • 選擇開發工具： jsconfig.json （建議用於 VS Code，讓 Intellisense 程式代碼完成運作）

5. 建立項目之後， cd my-nuxtjs-app 若要輸入您的 Nuxt.js 項目目錄，請在 VS Code WSL-Remote 環境中輸入 code . 以開啟專案。

   

6. 安裝 Nuxt.js 之後，您需要知道 3 個命令：

   • 使用 npm run dev 配置來運行具備熱重載、文件監控和任務重新運行功能的開發實例。
   • 用於編譯專案的 npm run build。
   • npm start 以生產環境模式啟動您的應用程式。

   在 VS Code 中開啟整合式 WSL 終端機 ([檢視]> [終端機])。 確定終端機路徑指向您的專案目錄 (即 ~/NuxtProjects/my-nuxt-app$)。 然後使用下列方式嘗試執行新 Nuxt.js 應用程式的開發實例： npm run dev

7. 本機開發伺服器將會啟動（顯示用於客戶端和伺服器編譯的很炫的進度列）。 建置項目之後，終端機將會顯示「已成功編譯」，以及編譯所花費的時間。 將網頁瀏覽器指向 http://localhost:3000 以開啟新的 Nuxt.js 應用程式。

   

8. 在 VS Code 編輯器中開啟 pages/index.vue 檔案。 尋找頁面標題 <v-card-title class="headline">Welcome to the Vuetify + Nuxt.js template</v-card-title> ，並將變更為 <v-card-title class="headline">This is my new Nuxt.js app!</v-card-title>。 當您的網頁瀏覽器仍然開啟至localhost：3000時，請儲存您的變更，並注意熱重載功能會自動編譯並更新瀏覽器中的變更。

9. 讓我們看看 Nuxt.js 如何處理錯誤。 </v-card-title>拿掉結尾標記，讓您的標題代碼現在看起來像這樣：<v-card-title class="headline">This is my new Nuxt.js app!。 儲存這項變更，並注意編譯錯誤會顯示在瀏覽器中，並在終端機中顯示，讓您知道遺漏 <v-card-title> 的結尾標記，以及可在程式碼中找到錯誤的行號。 替換 </v-card-title> 結尾標記，儲存，頁面將會重載。

您可以按 F5 鍵，或前往功能表欄中的 [檢視] > [偵錯] (Ctrl+Shift+D) 和 [檢視] > [偵錯主控台] (Ctrl+Shift+Y)，以使用 VS Code 的偵錯工具搭配 Nuxt.js 應用程式。 在 [偵錯] 視窗中選取齒輪圖示，即會建立啟動組態 (launch.json) 檔案，以儲存偵測設定的詳細資訊。 若要深入瞭解，請參閱 VS Code 偵錯工具。

若要深入瞭解 Nuxt.js，請參閱 Nuxt.js 指南。