クイック スタート: Vue.js プロジェクトを作成する

このクイック スタートでは、フロントエンド Web アプリケーション Vue.js 基本を作成して実行します。 この記事では、Visual Studio統合開発環境 (IDE) の 5 分から 10 分の概要について説明します。

前提 条件

次の前提条件を使用して構成を準備します。

• Visual Studio 2022 以降（無料版は Visual Studio downloads から入手できます）

• npm (Node.js、 https://www.npmjs.com/に含まれています)

• Vue.js (インストール | Vue.js (vuejs.org))

Vue アプリを作成する

次の手順に従って、Vue.js Web アプリを作成します。

1. Visual Studio Start ウィンドウ (File>Start Window) で、新しいプロジェクトの作成 を選択します。

   

   

2. [ 新しいプロジェクトの作成 ] ダイアログボックスで、検索ボックスに 「Vue 」と入力します。 JavaScript または TypeScript 用 の Vue アプリ テンプレートを選択し、[ 次へ] を選択します。

   

   

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

3. プロジェクトとソリューションの名前を入力し、[ 作成] を選択します。

Visual Studioが新しいプロジェクトを作成するまで待ちます。

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

既定のプロジェクト設定では、プロジェクトをビルドしてデバッグできます。

設定を変更する場合は、次の手順に従います。

1. ソリューション エクスプローラーでプロジェクトを右クリックし、Properties を選択します。

2. プロジェクトのプロパティ ウィンドウで、[ デバッグ]、[ Linting]、[ ビルド]、または [配置 ] を選択して、対応するプロパティを表示します。

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

プロジェクトを構築する

新しいプロジェクトをビルドするには、[ Build>Build Solution] を選択します。

プロジェクトを開始する

F5 キーを押すか、ウィンドウの上部にある [開始] アクションを使用します。

プロジェクトは、次のテキスト (または類似) を含むコマンド プロンプトを開きます。

VITE v4.4.9 ready in 780 ms

プロセスが成功すると、ベース Vue.js アプリが開きます。

次のステップ