一份指南協助您安裝 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 的一系列問題：
開啟 WSL 命令列 （即Ubuntu）。
建立新的專案資料夾：
mkdir NuxtProjects
，並進入該目錄：
cd NuxtProjects
。
安裝 Nuxt.js 並建立專案（將 'my-nuxt-app' 替換為您希望命名應用程式的名稱）：
npm create nuxt-app my-nuxt-app
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 程式代碼完成運作）
建立項目之後，
cd my-nuxtjs-app
若要輸入您的 Nuxt.js 項目目錄，請在 VS Code WSL-Remote 環境中輸入
code .
以開啟專案。
npm start
以生產環境模式啟動您的應用程式。
在 VS Code 中開啟整合式 WSL 終端機 (
[檢視]> [終端機]
)。 確定終端機路徑指向您的專案目錄 (即
~/NuxtProjects/my-nuxt-app$
)。 然後使用下列方式嘗試執行新 Nuxt.js 應用程式的開發實例：
npm run dev
本機開發伺服器將會啟動（顯示用於客戶端和伺服器編譯的很炫的進度列）。 建置項目之後，終端機將會顯示「已成功編譯」，以及編譯所花費的時間。 將網頁瀏覽器指向
http://localhost:3000
以開啟新的 Nuxt.js 應用程式。
在 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時，請儲存您的變更，並注意熱重載功能會自動編譯並更新瀏覽器中的變更。
讓我們看看 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 偵錯工具
。
