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

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

Edge

事前準備

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

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

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

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

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

    Select a framework
  7. 使用言語の選択

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

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

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

    finish

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

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

    cd

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

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

    インストール完了

ブラウザで実行

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

検証環境

関連ページ