気が付けば、最後の投稿から1年近くたっていました。
その間に、vue.jsの勉強をはじめていたのですが、最近になってやっと Vue CLI をインストールしました。
今回は Vue CLI を windows 環境にインストールする手順を、備忘録的に記録していきます。
情報は2023年11月現在のものとなります。
手順としては、node.jsをインストール(npm導入)した後、vueCLIをインストールする形になります。
1.node.jsインストーラのダウンロード
検索で出てくる情報によると、日本語ページが準備されているようなのですが、2023年11月時点ではなぜか「404エラー」。
落ち着いて、英語ページを使用します。
Current(最新版)と、LTS(Long Term Support:長期サポート版)がありますが、安定して動作してほしいので、LTSを選択します。
適当な場所に node-v20.10.0-x64.msi(インストーラ)を保存します。
2.node.jsのインストール手順
先ほどダウンロードした、インストーラを開きます。
「Next」をクリック。
ライセンス規約に同意しますか?と聞かれているので、
「I accept the terms in the License Agreement」にチェックを入れて、「Next」。
インストール先はどうしますか?と聞かれているので、
変更の必要がある場合は、「Change」から変更して、「Next」。
インストールするものをカスタムしますか?と聞かれているので、
必要な方は変更して、「Next」。
必要なツール(Chocolatey)を自動でインストールしますか?と聞かれているので、
「Automatically install the necessary tools. …」にチェックを入れて、「Next」。
インストールの準備okです!と言っているので、
「Install」を押します。
インストール完了なので、「Finish」。
3.node.js,npmのインストールを確認
コマンドプロンプトを開いて、動作確認をしていきます。
コマンドプロンプトに、
node --version
npm --version
を入力して、バージョン情報が表示されれば、okです。
4.Vue CLI をインストール
ここからは、VS Codeから、Power Shellを使っていきます。
VS Code を開き、「Ctr+Shift+@」で、ターミナルを開きます。
※Windows Power Shell でも以下、同じコマンドが実行できます。
念のため、npmが叩けるか確認して、 Vue CLI をインストールします。
npm install -g @vue/cli
と、入力して実行!
なんか怒ってますが、これでインストール完了です。
5.まとめ
Windowsの場合のインストールの流れは、以下のようになります。
- node.js をインストール(GUI)
→ npm(パッケージ管理マネージャ)が使用可能に! - Vue CLI をインストール(Power Shell)
英語の画面がたくさん出るのですが、がんばってググって無事インストールできました。
これからインストールされる方の参考になれば幸いです。