Vue.js プロジェクトを作成する

この 5 ~ 10 分間の Visual Studio 統合開発環境 (IDE) の概要では、単純な Vue.js フロントエンド Web アプリケーションを作成して実行します。

前提 条件

次のソフトウェアをインストールしてください。

• Visual Studio 2022 以降。 Visual Studio のダウンロード ページに移動して、無料でインストールします。
• npm (https://www.npmjs.com/) (Node.js に含まれています)
• Vue.js (Installation | Vue.js (vuejs.org))

アプリを作成する

1. [スタート] ウィンドウ ([ファイル]>[スタート ウィンドウ] を選んで開きます) で、[新しいプロジェクトの作成] を選びます。

   の作成を示すスクリーンショット

2. 上部の検索バーで Vue を検索し、JavaScript または TypeScript Vue App を選択します。

   テンプレートスクリーンショット

   Visual Studio 2022 バージョン 11 以降では、テンプレート名が スタンドアロン JavaScript Vue Project から Vue Appに変更されました。

3. プロジェクトとソリューションに名前を付け、[次へ] 選択します。

4. [Create] を選択し、その後、Visual Studio がプロジェクトを作成するまで待ちます。

プロジェクトのプロパティを表示する

既定のプロジェクト設定では、プロジェクトをビルドしてデバッグできます。 ただし、設定を変更する必要がある場合は、ソリューション エクスプローラーでプロジェクトを右クリックし、[プロパティ] を選んでから、[リンティング]、[ビルド]、または [配置] セクションに移動します。

デバッガーの構成には、launch.jsonを使用します。

プロジェクトをビルドする

[ビルド]>[ソリューションのビルド] を選んで、プロジェクトをビルドします。

プロジェクトを開始する

F5 押すか、ウィンドウの上部にある [スタート] ボタンを選択すると、次のようなコマンド プロンプトが表示されます。

• VITE v4.4.9 は 780 ミリ秒で準備完了

  手記

  Node.jsのバージョンを更新するように指示するメッセージなど、コンソール出力でメッセージを確認します。

次に、基本 Vue.js アプリが表示されます。

次の手順

ASP.NET Core 統合の場合: