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

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

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

• .vue ファイルの Script、Style、Template ブロックのサポート
• .vue ファイルでの lang 属性の認識
• Vue.js プロジェクトとファイル テンプレート

前提条件

• Visual Studio 2017 バージョン 15.8 以降のバージョンと Node.js 開発ワークロードがインストールされている必要があります。

  重要

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

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

  Visual Studio は既にあり、ワークロードだけをインストールする必要がある場合は、 [ツール]>[ツールと機能を取得] に移動すると、Visual Studio インストーラーが開きます。 [Node.js 開発] ワークロードを選択し、 [変更] を選択します。

• ASP.NET Core プロジェクトを作成するには、ASP.NET と、Web 開発ワークロードおよび .NET Core クロスプラットフォーム開発ワークロードがインストールされている必要があります。

• Node.js ランタイムをインストールしている必要があります。

  インストールされていない場合は、LTS バージョンを Node.js Web サイトからインストールしてください。 一般に、Visual Studio はインストール済みの Node.js ランタイムを自動的に検出します。 インストール済みのランタイムが検出されない場合は、プロパティ ページでインストール済みのランタイムを参照するようにプロジェクトを構成できます。 (プロジェクトを作成した後、プロジェクト ノードを右クリックして [プロパティ] を選択します)。

Node.js を使用して Vue.js プロジェクトを作成する

新しい Vue.js テンプレートを使用して新しいプロジェクトを作成できます。 テンプレートを使うのが開始する最も簡単な方法です。 詳細については、「Use Visual Studio to create your first Vue.js app」(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 アプリケーション (C#) を使用します。 ただし、さまざまなプロジェクトやプログラミング言語から選択することができます。

空のプロジェクトを作成する

• Visual Studio を起動し、新しいプロジェクトを作成します。

  Visual Studio 2019 で、スタート ウィンドウの [新しいプロジェクトの作成] を選択します。 スタート ウィンドウが開いていない場合は、[ファイル]>[スタート ウィンドウ] を選択します。 「Web アプリ」と入力し、言語として C# を選択した後、[ASP.NET Core Empty]\(ASP.NET Core (空)\) を選択し、[次へ] を選択します。 次の画面で、プロジェクトに「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 モジュールをインストールするには、コマンド プロンプトを開き、「npm install --g vue-cli」または「npm install -g @vue/cli」 (現在ベータ版のバージョン 3.0 の場合) と入力します。

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

1. コマンド プロンプトに移動し、現在のディレクトリをお使いのプロジェクト ルート フォルダーに変更します。

2. 「vue init webpack client-app」と入力し、追加の質問に回答するように求められたら手順に従います。

   Note

   .vue ファイルについては、Webpack または類似のフレームワークをローダーと共に使って変換を行う必要があります。 TypeScript および Visual Studio では、.vue ファイルをコンパイルできません。 バンドルについても同様です。TypeScript では、ES2015 モジュール (つまり、import と export ステートメント) を、ブラウザーで読み込む最終的な 1 つの .js ファイルに変換できません。 ここでも Webpack が最善の選択肢となります。 MSBuild を使って Visual Studio 内からこのプロセスを進めるには、Visual Studio テンプレートから開始する必要があります。 現在のところ、すぐに使える Vue.js 開発用の ASP.NET テンプレートはありません。

ビルドされたファイルを wwwroot に出力するように Webpack の構成を変更する

• ./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 で [プロジェクト]>[プロパティ]>[ビルド イベント] に移動します。

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 のサポートを追加する

次の手順では、現在ベータ版である vue-cli 3.0 が必要です。

1. コマンド プロンプトに移動し、現在のディレクトリをプロジェクト ルート フォルダーに変更します。

2. 「vue create client-app」と入力し、[Manually select features]\(手動で機能を選択する\) を選択します。

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 属性は、template または style タグでは動作しません。

• .vue ファイル内の script ブロックのデバッグは、その前処理される性質によりサポートされていません。

• 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 コマンドの実行は動作しません。

関連するコンテンツ

• Vue の概要ガイド。
• Vue CLI プロジェクト
• webpack 構成ドキュメント。