【2026年版】WindowsでVue.jsをインストールする方法｜Node.jsの準備から画面確認まで解説

Vue.jsは、Webアプリケーションの画面を作るために使われるJavaScriptフレームワークです。

WindowsでVue.jsを使うには、先にNode.jsとnpmを使える状態にしておく必要があります。

この記事では、WindowsでVue.jsをインストールし、Vueプロジェクトを作成してブラウザで表示確認するところまで解説します。

この記事でやること
Vue.jsのインストールに必要なもの
Node.jsをインストールする
1. Node.jsのインストール手順
Node.jsがインストールできたか確認する
Visual Studio Codeを用意する
作業用フォルダを作る
PowerShellで作業用フォルダへ移動する
Visual Studio Codeからターミナルを開く方法
Vueプロジェクトを作成する
1. 初心者向けの選択例
作成されたプロジェクトフォルダへ移動する
必要なパッケージをインストールする
開発サーバーを起動する
ブラウザでVueの画面を確認する
開発サーバーを停止する
次回起動するときの手順
Vue.jsがインストールできないときの確認ポイント
Vue CLIはインストールしなくていいのか
Vue.jsのインストールで使ったコマンドまとめ
まとめ

この記事でやること

この記事では、次の手順でVue.jsを使える状態にします。

Node.jsをインストールする
Node.jsとnpmのバージョンを確認する
作業用フォルダを作る
Vueプロジェクトを作成する
必要なパッケージをインストールする
開発サーバーを起動する
ブラウザでVueの初期画面を確認する

この記事では、現在のVue公式手順で使われるnpm create vue@latestを使います。

Vue.jsのインストールに必要なもの

WindowsでVue.jsを使うには、次のものを用意します。

Windowsのパソコン
Google Chromeなどのブラウザ
Visual Studio Code
Node.js
npm

npmは、Node.jsをインストールすると一緒に入ります。

Vue.jsのプロジェクト作成や起動には、このnpmを使います。

Node.jsをインストールする

まず、Node.jsをインストールします。

ブラウザでNode.jsの公式サイトを開きます。

https://nodejs.org/

公式サイトを開いたら、Windows用のインストーラーをダウンロードします。

学習用で使う場合は、基本的にLTS版を選びます。

LTS版は、長期サポート版です。通常の学習や開発では、LTS版を選ぶと進めやすいです。

Node.jsのインストール手順

Node.js公式サイトを開く
LTS版のWindows Installerをダウンロードする
ダウンロードしたインストーラーをダブルクリックする
インストール画面が開いたら「Next」で進める
利用規約に同意する
インストール先は基本的にそのまま進める
追加設定も基本的にそのまま進める
「Install」をクリックする
インストールが終わったら「Finish」をクリックする

初心者の場合は、特別な理由がなければ標準設定のまま進めて問題ありません。

Node.jsがインストールできたか確認する

Node.jsをインストールしたら、使える状態になっているか確認します。

Windowsのスタートメニューで「PowerShell」と検索して、PowerShellを開いてください。

PowerShellを開いたら、次のコマンドを入力します。

node -v

Enterキーを押して、次のようにバージョン番号が表示されればOKです。

v24.〇〇.〇

表示される数字は、インストールした時期によって変わります。

次に、npmも確認します。

npm -v

こちらもバージョン番号が表示されればOKです。

11.〇〇.〇

nodeやnpmが認識されない場合は、PowerShellを一度閉じて、もう一度開いてから試してください。

それでも表示されない場合は、Node.jsのインストールが完了していない可能性があります。

Visual Studio Codeを用意する

Vue.jsのファイルを編集するために、Visual Studio Codeを使います。

すでにインストールしている場合は、そのまま使えます。

まだ入れていない場合は、Visual Studio Codeをインストールしてください。

Vue.js用の拡張機能を入れる場合は、Visual Studio Codeの拡張機能から次の名前を検索します。

Vue - Official

見つかったら、インストールしておきます。

この拡張機能を入れると、Vueファイルを編集しやすくなります。

作業用フォルダを作る

次に、Vue.jsの練習用フォルダを作ります。

デスクトップやドキュメントなど、自分が分かりやすい場所にフォルダを作ってください。

フォルダ名は、たとえば次のようにします。

vue-practice

このフォルダの中に、Vueプロジェクトを作成します。

PowerShellで作業用フォルダへ移動する

Vueプロジェクトは、PowerShellでコマンドを実行して作成します。

まず、PowerShellで作業用フォルダへ移動します。

たとえば、デスクトップにvue-practiceフォルダを作った場合は、次のように入力します。

cd Desktop\vue-practice

現在いる場所を確認したい場合は、次のコマンドを使います。

pwd

フォルダの中身を確認したい場合は、次のコマンドを使います。

dir

Visual Studio Codeからターミナルを開く方法

PowerShellではなく、Visual Studio Codeのターミナルを使うこともできます。

手順は次の通りです。

Visual Studio Codeを開く
「ファイル」をクリックする
「フォルダーを開く」をクリックする
vue-practiceフォルダを選ぶ
上部メニューの「ターミナル」をクリックする
「新しいターミナル」をクリックする

画面下にターミナルが表示されます。

ここにコマンドを入力して、Vueプロジェクトを作成できます。

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

作業用フォルダに移動できたら、Vueプロジェクトを作成します。

次のコマンドを入力してください。

npm create vue@latest

実行すると、Vueプロジェクト作成用のツールが起動します。

最初に、プロジェクト名を聞かれます。

Project name:

ここでは、例として次の名前にします。

my-vue-app

そのあと、TypeScriptやVue Routerなどを追加するか聞かれます。

初めてVue.jsをインストールする段階では、すべてNoで進めて問題ありません。

初心者向けの選択例

Project name: my-vue-app
Add TypeScript? No
Add JSX Support? No
Add Vue Router for Single Page Application development? No
Add Pinia for state management? No
Add Vitest for Unit Testing? No
Add an End-to-End Testing Solution? No
Add ESLint for code quality? No
Add Prettier for code formatting? No
Add Vue DevTools? No

質問の内容は、バージョンによって少し変わる場合があります。

最初は、追加機能を入れずに作成すると分かりやすいです。

作成されたプロジェクトフォルダへ移動する

Vueプロジェクトが作成されたら、そのフォルダへ移動します。

今回の例では、プロジェクト名をmy-vue-appにしたので、次のコマンドを入力します。

cd my-vue-app

移動できたか確認するには、次のコマンドを使います。

dir

次のようなファイルやフォルダが表示されればOKです。

index.html
package.json
src
vite.config.js

表示される内容は、選んだオプションによって少し変わる場合があります。

必要なパッケージをインストールする

次に、Vueプロジェクトに必要なパッケージをインストールします。

プロジェクトフォルダの中で、次のコマンドを実行してください。

npm install

インストールが始まります。

完了すると、node_modulesというフォルダが作成されます。

node_modulesには、Vue.jsや開発に必要なパッケージが入ります。

このフォルダは手動で編集する必要はありません。

開発サーバーを起動する

パッケージのインストールが終わったら、開発サーバーを起動します。

次のコマンドを実行してください。

npm run dev

成功すると、ターミナルに次のような表示が出ます。

Local:   http://localhost:5173/

このURLが、Vueの画面を確認するためのアドレスです。

ポート番号は環境によって変わる場合があります。

ターミナルに表示されたURLをそのまま開いてください。

ブラウザでVueの画面を確認する

ターミナルに表示されたURLを、Google Chromeなどのブラウザで開きます。

たとえば、次のようなURLです。

http://localhost:5173/

Vueの初期画面が表示されれば、Vue.jsのインストールとプロジェクト作成は完了です。

画面が表示されない場合は、次の点を確認してください。

npm run devを実行したターミナルを閉じていないか
ターミナルに表示されたURLを開いているか
my-vue-appフォルダの中でnpm run devを実行しているか
PowerShellやターミナルにエラーが表示されていないか

開発サーバーは、ターミナルで動き続けます。

画面を確認している間は、ターミナルを閉じないでください。

開発サーバーを停止する

Vueの画面確認が終わったら、開発サーバーを停止します。

npm run devを実行しているターミナルで、次のキーを押します。

Ctrl + C

停止するか確認された場合は、Yを入力してEnterキーを押します。

これで開発サーバーが停止します。

次回起動するときの手順

一度作成したVueプロジェクトは、毎回作り直す必要はありません。

次回作業するときは、次の手順で起動します。

PowerShellまたはVisual Studio Codeのターミナルを開く
Vueプロジェクトのフォルダに移動する
npm run devを実行する
表示されたURLをブラウザで開く

たとえば、デスクトップのvue-practiceフォルダの中にmy-vue-appを作った場合は、次のように移動します。

cd Desktop\vue-practice\my-vue-app

そのあと、開発サーバーを起動します。

npm run dev

ターミナルに表示されたURLをブラウザで開けば、Vueの画面を確認できます。

Vue.jsがインストールできないときの確認ポイント

Vue.jsのインストールや起動でエラーが出る場合は、次の点を確認してください。

Node.jsがインストールされているか
Node.jsのバージョンが古すぎないか
npm -vでnpmのバージョンが表示されるか
作業用フォルダに移動してからコマンドを実行しているか
npm installを実行したか
npm run devをプロジェクトフォルダの中で実行しているか
ターミナルに表示されたURLを開いているか

nodeコマンドが使えない場合

次のコマンドでエラーが出る場合があります。

node -v

この場合は、Node.jsが入っていないか、インストール後のPowerShellを開き直していない可能性があります。

PowerShellを一度閉じて、もう一度開いてから試してください。

それでも使えない場合は、Node.jsを再インストールしてください。

npm create vue@latestでエラーが出る場合

npm create vue@latestでエラーが出る場合は、ネット接続を確認してください。

このコマンドは、必要なパッケージをインターネットから取得して実行します。

また、Node.jsのバージョンが古い場合も失敗することがあります。

次のコマンドでNode.jsのバージョンを確認してください。

node -v

古いバージョンを使っている場合は、Node.js公式サイトから新しいLTS版をインストールしてください。

npm run devでエラーが出る場合

npm run devでエラーが出る場合は、Vueプロジェクトのフォルダにいるか確認します。

次のコマンドで、現在のフォルダの中身を確認してください。

dir

package.jsonが表示されない場合は、Vueプロジェクトのフォルダに移動できていません。

今回の例では、次のように移動します。

cd my-vue-app

そのあと、もう一度実行します。

npm run dev

localhostの画面が表示されない場合

ブラウザでlocalhostの画面が表示されない場合は、開発サーバーが起動しているか確認してください。

ターミナルに次のような表示が出ているか確認します。

Local:   http://localhost:5173/

表示されていない場合は、npm run devが実行できていません。

プロジェクトフォルダの中で、もう一度実行してください。

Vue CLIはインストールしなくていいのか

Vue.jsを調べると、Vue CLIをインストールする古い手順が出てくることがあります。

以前は、次のようなコマンドでVueプロジェクトを作る方法がよく使われていました。

npm install -g @vue/cli
vue create my-project

現在の新規プロジェクトでは、基本的にnpm create vue@latestを使う手順で進めます。

そのため、これからVue.jsを始める場合は、Vue CLIをグローバルインストールしなくても問題ありません。

Vue.jsのインストールで使ったコマンドまとめ

コマンド	内容
`node -v`	Node.jsのバージョンを確認する
`npm -v`	npmのバージョンを確認する
`npm create vue@latest`	Vueプロジェクトを作成する
`cd my-vue-app`	作成したプロジェクトフォルダへ移動する
`npm install`	必要なパッケージをインストールする
`npm run dev`	開発サーバーを起動する
`Ctrl + C`	開発サーバーを停止する