Node.js Tools for Visual Studio を使用して Vue.js アプリケーションを作成する

2025-01-31

Visual Studio では、JavaScript または TypeScript の Vue.js フレームワークを使用したアプリ開発がサポートされています。

次の新機能は、Visual Studio Vue.js アプリケーション開発をサポートします。

.vue ファイルでのスクリプト、スタイル、およびテンプレートブロックのサポート
.vue ファイルの lang 属性の認識
Vue.js プロジェクトとファイルのテンプレート

前提条件

Visual Studio 2017 バージョン 15.8 以降のバージョンがインストールされ、Node.js 開発 ワークロードが必要です。

重要

この記事では、Visual Studio 2017 バージョン 15.8 以降でのみ使用できる機能が必要です。

必要なバージョンがまだインストールされていない場合は、Visual Studio 2019 インストールします。

ワークロードをインストールする必要があるが、既に Visual Studio がある場合は、Tools>ツールと機能の取得...に移動すると、Visual Studio インストーラーが開きます。 [Node.js 開発] ワークロードを選択し、[変更] を選択します。
ASP.NET Core プロジェクトを作成するには、ASP.NET および Web 開発ワークロードと .NET Core クロスプラットフォーム開発ワークロードがインストールされている必要があります。
Node.js ランタイムがインストールされている必要があります。

インストールされていない場合は、Node.js Web サイトから 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を選択してから、[次へ] を選択します。次の画面で、プロジェクト名を「client-app」にし、[次へ] を選択します。

推奨されるターゲットフレームワークまたは .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 を入力します。

Vue CLI を使用して新しいクライアントアプリケーションをスキャフォールディングする

コマンドプロンプトに移動し、現在のディレクトリをプロジェクトのルートフォルダーに変更します。
vue init webpack client-app 入力し、追加の質問に回答するように求められたら、手順に従います。

手記

.vue ファイル の場合は、webpack または同様のフレームワークとローダーを使用して変換を行う必要があります。 TypeScript と Visual Studio は、.vue ファイル をコンパイルする方法がわかりません。バンドルについても同様です。TypeScript では、ES2015 モジュール (つまり、import ステートメントと export ステートメント) を、ブラウザーに読み込む 1 つの最終的な .js ファイルに変換する方法がわかりません。ここでも、webpack が最適な選択肢です。 MSBuild を使用して Visual Studio 内からこのプロセスを実行するには、Visual Studio テンプレートから開始する必要があります。現時点では、Vue.js 開発用の ASP.NET テンプレートはありません。

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'),

ビルドがトリガーされるたびにクライアントアプリをビルドするプロジェクトを示す

Visual Studio で、Project>プロパティ>ビルドイベントに移動します。
[ビルド前に実行するコマンドライン] に「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 のサポートを追加する

これらの手順には、現在ベータ版の vue-cli 3.0 が必要です。

コマンドプロンプトに移動し、現在のディレクトリをプロジェクトのルートフォルダーに変更します。
「vue create client-app」と入力し、「手動で機能を選択」を選択します。
[TypeScript] を選択し、他の必要なオプションを選択します。
残りの手順に従って、質問に回答します。

TypeScript の Vue.js プロジェクトを構成する

./client-app/tsconfig.json ファイルを開き、コンパイラオプションに noEmit:true を追加します。

このオプションを設定すると、Visual Studio でビルドするたびにプロジェクトが乱雑にならないようにすることができます。

次に、./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 ファイル モジュールとして認識されません。 .vue ファイルの を TypeScript に指示するには、次のようなコードを含むファイルが必要です (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 をビルド前イベントとして実行しても機能しません。

次の方法で共有

Node.js Tools for Visual Studio を使用して Vue.js アプリケーションを作成する

前提 条件