快速入門：使用 Visual Studio 建立您的第一個 Vue.js 應用程式

在這段 5-10 分鐘的 Visual Studio 整合式開發環境（IDE）簡介中，您將建立並執行簡單的 Vue.js Web 應用程式。

先決條件

您必須安裝 Visual Studio 和 Node.js 開發工作負載。

如果您尚未安裝 Visual Studio 2019，請移至 Visual Studio 下載頁面以免費安裝。

如果您需要安裝工作負載，但已經有 Visual Studio，請移至 [工具>] [取得工具和功能...]，這會開啟 Visual Studio 安裝程式。選擇 Node.js 開發 工作負載，然後選擇 Modify（修改）。
您必須安裝 Node.js 執行階段。

如果您尚未安裝，建議您從 Node.js 網站安裝 LTS 版本，以與外部架構和程式庫取得最佳相容性。 Node.js 專為 32 位和 64 位架構而構建。 Visual Studio 中的 Node.js 工具（包含在 Node.js 工作負載中）支援這兩個版本。只需要一個，Node.js 安裝程式一次只支援安裝一個。

一般而言，Visual Studio 會自動偵測已安裝的 Node.js 執行階段。如果未偵測到已安裝的執行階段，您可以將專案配置為在內容頁面中參照已安裝的執行階段（建立專案之後，用滑鼠右鍵按一下專案節點，選擇 [內容]，然後設定 Node.exe 路徑）。您可以使用 Node.js 的廣域安裝，也可以在每個 Node.js 專案中指定本端解譯器的路徑。

首先，您將建立 Vue.js Web 應用程式專案。

如果您尚未安裝 Node.js 執行階段，請從 Node.js 網站安裝 LTS 版本。

如需詳細資訊，請參閱先決條件。
開啟 Visual Studio。
建立新專案。

按 Esc 關閉開始視窗。輸入 Ctrl + Q 以開啟搜尋方塊，輸入 [基本 Vue.js]，然後選擇 [基本] Vue.js [Web 應用程式 （JavaScript 或 TypeScript）]。在出現的對話方塊中，輸入名稱 basic-vuejs，然後選擇 Create （建立）。

如果您沒有看到 [基本 Vue.js Web 應用程式 專案範本]，則必須新增 Node.js 開發 工作負載。如需詳細指示，請參閱先決條件。

Visual Studio 會建立新的專案。新專案會在 [方案總管] （右窗格）中開啟。
檢查 [輸出] 視窗（下窗格），以取得安裝應用程式所需 npm 套件的進度。
在 [方案總管] 中，開啟 npm 節點，並確定已安裝所有列出的 npm 套件。

如果遺漏任何套件（驚嘆號圖示），您可以右鍵單擊 npm 節點，然後選擇 安裝缺少的 npm 套件。

查看右窗格中的[方案瀏覽器]。
- 以粗體反白顯示的是您的專案，使用您在 「新增專案 」對話方塊中指定的名稱。在磁碟上的此專案由你的專案資料夾裡的njsproj檔案表示。
- 最上層是一個解決方案，預設情況下，其名稱與您的專案相同。解決方案以磁碟上的sln檔案表示，是一個或多個相關專案的容器。
- npm 節點會顯示任何已安裝的 npm 套件。您可以用滑鼠右鍵按一下 npm 節點，以使用對話方塊搜尋和安裝 npm 套件。
如果您想要安裝 npm 套件或從命令提示字元執行 Node.js 命令，請以滑鼠右鍵按一下專案節點，然後選擇 [在此處開啟命令提示字元]。

在 [方案總管] 中，以滑鼠右鍵按一下任何資料夾，例如 src/components 資料夾，然後選擇 [新增>專案]。

如果您沒有看到所有項目範本，請選擇 [顯示所有範本]，然後選擇項目範本。
選取 JavaScript Vue 單一檔案元件或 TypeScript Vue 單一檔案元件，然後按一下新增。

Visual Studio 會將新檔案新增至專案。

JavaScript Vue.js 專案範本（以及舊版的 TypeScript 範本）會透過設定建置後事件來使用 build npm 指令碼。如果您想要修改此設定，請從 Windows 檔案總管開啟專案檔（<projectname.njsproj>），並找出下列程式碼行：

<PostBuildEvent>npm run build</PostBuildEvent>

恭喜您完成此快速入門！我們希望您了解一些有關將 Visual Studio IDE 與 Vue.js一起使用的知識。如果您想更深入地研究其功能，請繼續閱讀目錄的 「教學」 部分中的教學課程。

此頁面對您有幫助嗎？