Vue 3 - 新しいプロジェクトを作成 ～ 実行までの手順(Windows)

Windows で Vue.js 3 のプロジェクトを作成し、ブラウザで実行するまでの手順です。

事前準備

新しいプロジェクトを作成

  1. プロジェクト用のディレクトリ(フォルダ)を作成します。
  2. コマンドプロンプト を開きます。
  3. 作成したディレクトリに移動します。
  4. 次のコマンドを実行します。 
    npm init @vitejs/app プロジェクト名
  5. Package name の入力

    パッケージ名を入力します。プロジェクト名が表示されるので、そのままでよければ Enter キー を押します。

  6. Framework(フレームワーク)の選択

    キーボードの ↓ キーを押し、vue を選択してから Enter キー を押します。

  7. 使用言語の選択

    JavaScript を使用する場合は vue、TypeScript を使用する場合は vue-ts を選択します。

  8. プロジェクトの作成完了

    ここまでの手順でプロジェクトの作成は完了です。引き続き、必要ファイルのインストールを行います。

必要ファイルのインストール

  1. プロジェクトファイル のある場所に移動します。 
    cd プロジェクト名

  2. 次のコマンドを実行し、必要ファイルをインストールします。 
    npm install
  3. インストールが始まるので、終わるまで待ちます。
  4. インストール完了

    ここまでの手順で必要ファイルのインストールは完了です。

ブラウザで実行

  1. 次のコマンドを実行し、vite(vue の開発ツール) を起動します。 
    npm run dev
  2. vite が起動すると URL が表示されます。
  3. Web ブラウザを起動し、表示されている URL に移動します。
  4. 画面中央のボタンを押すと、カウンターが増えていきます。

検証環境

関連ページ

© 2024 curict