Vue CLI をインストール(windows版)

VueCLIをインストール ツール

気が付けば、最後の投稿から1年近くたっていました。
その間に、vue.jsの勉強をはじめていたのですが、最近になってやっと Vue CLI をインストールしました。
今回は Vue CLI を windows 環境にインストールする手順を、備忘録的に記録していきます。
情報は2023年11月現在のものとなります。

手順としては、node.jsをインストール(npm導入)した後、vueCLIをインストールする形になります。

1.node.jsインストーラのダウンロード

検索で出てくる情報によると、日本語ページが準備されているようなのですが、2023年11月時点ではなぜか「404エラー」
落ち着いて、英語ページを使用します。

node.jsのwebサイト
node.jsのwebサイト

Current(最新版)と、LTS(Long Term Support:長期サポート版)がありますが、安定して動作してほしいので、LTSを選択します。
適当な場所に node-v20.10.0-x64.msi(インストーラ)を保存します。

2.node.jsのインストール手順

先ほどダウンロードした、インストーラを開きます。

インストールウィザードを起動
node-v20.10.0-x64.msi を開く

「Next」をクリック。

ライセンス規約に同意
ライセンス規約に同意

ライセンス規約に同意しますか?と聞かれているので、
「I accept the terms in the License Agreement」にチェックを入れて、「Next」

インストール場所を指定
インストール先を指定

インストール先はどうしますか?と聞かれているので、
変更の必要がある場合は、「Change」から変更して、「Next」

インストールするものを選択
インストールするものをカスタム

インストールするものをカスタムしますか?と聞かれているので、
必要な方は変更して、「Next」

依存関係の解決
依存関係を解決

必要なツールChocolateyを自動でインストールしますか?と聞かれているので、
「Automatically install the necessary tools. …」にチェックを入れて、「Next」

Chocolatey

windows上で動作する、パッケージ管理システム。コマンドライン(Power Shell)でソフトウェアを簡単にインストールできるようになります。
今回のnode.jsインストールでも、裏側で依存関係を解決してくれます。

インストール開始
インストール開始

インストールの準備okです!と言っているので、
「Install」を押します。

バーが進んで・・・
バーが進んで・・・
インストール完了
インストール完了

インストール完了なので、「Finish」

3.node.js,npmのインストールを確認

コマンドプロンプトを開いて、動作確認をしていきます。

node.jsとnpmがインストールされていることを確認
node.jsとnpmがインストールされていることを確認

コマンドプロンプトに、

node --version
npm --version

を入力して、バージョン情報が表示されれば、okです。

4.Vue CLI をインストール

ここからは、VS Codeから、Power Shellを使っていきます。

VS Code を開き、「Ctr+Shift+@」で、ターミナルを開きます。
※Windows Power Shell でも以下、同じコマンドが実行できます。

Vue CLI をインストール
npm で Vue CLI をインストール

念のため、npmが叩けるか確認して、 Vue CLI をインストールします。

npm install -g @vue/cli

と、入力して実行!

ガーっと進んで・・・
ガーっと進んで・・・
インストール完了!
インストール完了!

なんか怒ってますが、これでインストール完了です。

5.まとめ

Windowsの場合のインストールの流れは、以下のようになります。

  1. node.js をインストール(GUI)
    → npm(パッケージ管理マネージャ)が使用可能に!
  2. Vue CLI をインストール(Power Shell)

英語の画面がたくさん出るのですが、がんばってググって無事インストールできました。

これからインストールされる方の参考になれば幸いです。

タイトルとURLをコピーしました