共用方式為

使用 Node.js Tools for Visual Studio 建立 Vue.js 應用程式

Visual Studio 支援在 JavaScript 或 TypeScript 中使用 Vue.js 架構進行應用程式開發。

下列新功能支援在 Visual Studio 中 Vue.js 應用程式開發：

  • 在.vue 檔案中支援腳本、樣式和範本區塊。
  • 在 lang 檔案上辨識 屬性
  • Vue.js 項目和檔案範本

先決條件

  • 您必須安裝 Visual Studio 2017 15.8 版或更新版本，且 Node.js 開發 工作負載。

    重要

    此文章需要使用僅在 Visual Studio 2017 15.8 版中提供的功能。

    如果尚未安裝必要的版本，請安裝 Visual Studio 2019。

    如果您需要安裝工作負載，但已經有 Visual Studio，請移至 Tools>Get Tools and Features...，這會開啟 Visual Studio 安裝程式。 選擇 Node.js 開發 工作負載，然後選擇 修改。

  • 若要建立 ASP.NET Core 專案，您必須安裝 ASP.NET 和 Web 開發和 .NET Core 跨平台開發工作負載。

  • 您必須安裝 Node.js 執行時環境。

    如果您沒有安裝，請從 Node.js 網站安裝 LTS 版本。 一般而言，Visual Studio 會自動偵測已安裝 Node.js 運行時間。 如果它未偵測到已安裝的運行時間，您可以將專案設定為參考屬性頁面中已安裝的運行時間。 （建立項目之後，以滑鼠右鍵按兩下項目節點，然後選擇 [[屬性]]。

使用 Node.js 建立 Vue.js 專案

您可以使用新的 Vue.js 樣本來建立新的專案。 使用範本是最簡單的開始使用方式。 如需詳細步驟，請參閱 使用Visual Studio建立第一個 Vue.js 應用程式。

使用 ASP.NET Core 和 Vue CLI 建立 Vue.js 專案

Vue.js 提供正式 CLI 來快速建構專案。 如果您想要使用 CLI 來建立應用程式，請遵循本文中的步驟來設定您的開發環境。

重要

這些步驟假設您已經對 Vue.js 架構有一些經驗。 如果沒有，請造訪 Vue.js 以深入了解架構。

建立新的 ASP.NET Core 專案

在此範例中，您會使用空白的 ASP.NET Core Application （C#）。 不過，您可以從各種專案和程式設計語言中選擇。

建立空白專案

  • 開啟 Visual Studio 並建立新的專案。

    在 Visual Studio 2019 中，選擇 [在開始視窗中建立新的專案。 如果啟動視窗未開啟，請選擇 [檔案]>[開始視窗]。 輸入 Web 應用程式，選擇 C# 作為語言，然後選擇 ASP.NET Core Empty，然後選擇 下一步。 在下一個畫面上，將專案命名 用戶端應用程式，然後選擇 [下一步] 。

    選擇建議的目標框架或 .NET 6，然後選擇 建立。

    如果您沒有看到 ASP.NET Core Web 應用程式 專案範本，則必須先安裝 ASP.NET 和 Web 開發 工作負載以及.NET Core 開發工作負載。 若要安裝工作負載，請按兩下 [新增專案] 對話框左窗格中的 [開啟 Visual Studio 安裝程式] 連結（選取 [檔案]>[新增>專案]。 Visual Studio 安裝程式隨即啟動。 選取必要的工作負載。

設定專案啟動檔

  • 開啟檔案 ./Startup.cs，並將下列幾行新增至 Configure 方法：

    app.UseDefaultFiles(); // Enables default file mapping on the web root.
app.UseStaticFiles(); // Marks files on the web root as servable.

安裝 Vue CLI

若要安裝 vue-cli npm 模組，請開啟命令提示字元，並輸入 3.0 版 npm install --g vue-cli 或 npm install -g @vue/cli（目前為 beta 版）。

使用 Vue CLI 建構新的用戶端應用程式

  1. 移至命令提示字元，並將目前目錄變更為專案根資料夾。

  2. 輸入 vue init webpack client-app，並在出現提示以回答其他問題時遵循步驟。

    注意

    針對 .vue 檔案，您必須使用 webpack 或類似的架構搭配載入器來執行轉換。 TypeScript 和 Visual Studio 不知道如何編譯 .vue 檔案。 統合也是如此：TypeScript 不知道如何將 ES2015 模組（也就是 import 和 export 語句）轉換成單一最終 .js 檔案，以在瀏覽器中載入。 同樣地，webpack 是這裡的最佳選擇。 若要使用 MSBuild 從 Visual Studio 內驅動此程式，您必須從 Visual Studio 範本開始。 目前，沒有內建的 ASP.NET 範本用於 Vue.js 開發。

修改 Webpack 組態，將建置的檔案輸出至 wwwroot

  • 開啟檔案 ./client-app/config/index.js，並將 build.index 和 build.assetsRoot 變更為 wwwroot 路徑：

    // Template for index.html
index: path.resolve(__dirname, '../../wwwroot/index.html'),

// Paths
assetsRoot: path.resolve(__dirname, '../../wwwroot'),

指出每次觸發建置時要建置用戶端應用程式的專案

  1. 在 Visual Studio 中，移至 Project>Properties>Build Events。

  2. 在 建置前事件命令列上，輸入 npm --prefix ./client-app run build。

設定 Webpack 的輸出模組名稱

  • 開啟檔案 ./client-app/build/webpack.base.conf.js，並將下列屬性新增至輸出屬性：

    devtoolModuleFilenameTemplate: '[absolute-resource-path]',
devtoolFallbackModuleFilenameTemplate: '[absolute-resource-path]?[hash]'

使用 Vue CLI 新增 TypeScript 支援

這些步驟需要目前處於Beta版的 vue-cli 3.0。

  1. 移至命令提示字元，並將目前目錄變更為專案根資料夾。

  2. 輸入 vue create client-app，然後選擇 手動選取功能。

  3. 選擇 [TypeScript]，然後選取其他所需的選項。

  4. 請遵循其餘步驟並回答問題。

設定 TypeScript 的 Vue.js 專案

  1. 開啟檔案 ./client-app/tsconfig.json，並將 noEmit:true 新增至編譯程序選項。

    藉由設定此選項，您避免每次在Visual Studio中建置時，都會使專案雜亂無章。

  2. 接下來，在 ./client-app/ 中建立 vue.config.js 檔案，並新增下列程序代碼。

    module.exports = {
    outputDir: '../wwwroot',

    configureWebpack: {
        output: {
            devtoolModuleFilenameTemplate: '[absolute-resource-path]',
            devtoolFallbackModuleFilenameTemplate: '[absolute-resource-path]?[hash]'
        }
    }
};

    上述程式代碼會設定 webpack 並設定 wwwroot 資料夾。

使用 vue-cli 3.0 建置

vue-cli 3.0 的未知問題可能會防止將建置程序自動化。 每次嘗試重新整理 wwwroot 資料夾時，都必須在 client-app 資料夾上執行命令 npm run build。

或者，您可以使用 ASP.NET 項目屬性，將 vue-cli 3.0 專案建置為建置前事件。 以滑鼠按一下右鍵項目，選擇 [屬性]，並在 [建置] 索引標籤中的 [建置前事件命令列] 文本框中加入下列命令。

cd ./client-app
npm run build
cd ../

局限性

  • lang 屬性僅支援 JavaScript 和 TypeScript 語言。 接受的值包括：js、jsx、ts 和 tsx。

  • lang 屬性不適用於範本或樣式標籤。

  • .vue 檔案中的偵錯腳本區塊不支援，由於其被預處理的特性。

  • TypeScript 無法將 .vue 檔案辨識為模組。 您需要包含如下列程式代碼的檔案，才能告訴 TypeScript .vue 檔案看起來是什麼（vue-cli 3.0 範本已包含此檔案）。

    // ./client-app/vue-shims.d.ts
declare module "*.vue" {
    import Vue from "vue";
    export default Vue;
}

  • 使用 vue-cli 3.0 時，在項目屬性上以建置前事件的形式執行命令 npm run build 無法運作。

相關內容