すべての大本はNode.js
Pythonをインストールすれば、PCでPythonのコードが書けるように、
Node.jsをインストールすればPCでNodeのコードが書けるようになります。
そのNodeのコードというのがjavaScriptになります。
本来はブラウザでしか使えないjavascriptをサーバー側でも使えるようにしたものです。
そのnodeのバージョンを複数管理して、かつそれぞれインストールできるものがnvm。
そのnodeの中に、npmがあります。
さらにそのnpmの中にvueがあります。
なので
nvm > node > npm > vue.js
というような関係になってると認識してます。
よって、まずはnvmです。
まずはnvmをDL
https://github.com/coreybutler/nvm-windows/releases
こちらのURLの中から、インストールしたいバージョンを選択します。
nvm-setup.exe
というリンクをクリックしてDL後、exeファイルを実行します。
出てきた手順に従ってインストールします。
私はデフォルトのパスにインストールしました。
nvm -v
などと入力し、バージョンが表示されればOK
次にNode.jsをインストール
nvmの機能として、好きなNode.jsのバージョンをインストールして、状況に応じて簡単に切り替えられるというものがあります。
本来、別にnvmをインストールしてからNodeをインストールしなくても良いのです。
直接公式から特定バージョンのNodeをインストールできます。
ただ、複数PJを並行していて、それぞれ特定のNodeのバージョンじゃないと動かないものというのがたまにあるので、
場合によって切り替えて使えたら便利だな～というときに活躍するのがnvmです。
早速インストールしていきます。
まずは今現在インストールできるNodeのバージョン一覧をチェックします。
nvm list available
LTS：安定系
CURRENT：最新版（安定ではない）
動作環境以上のバージョンであれば、安定系が無難
次にVueの公式を見て、動作環境を見ます。
https://ja.vuejs.org/guide/quick-start#creating-a-vue-application
コマンドラインに慣れている
Node.js のバージョン 18.3 以上をインストールしている
とあるので18.3以上であれば問題なさそうです。
このあたりのコマンドを参考に、インストールしていきます。
https://github.com/coreybutler/nvm-windows?tab=readme-ov-file#usage
nvm install とすれば良さそうです。
versionのところにltsとか指定しても行けそうなので、そちらでやってみました。
nvm install lts
次に、本当にインストールされているかチェックします。
nvm list
先ほどインストールしたバージョンがひとつだけ表示されていました。
>nvm list
20.18.0
ただ、これだけではまだインストールしただけなので、
node -v
としてみても何もでないはずです。
「使いたいです！」というオファーを出す必要があります。
nvm use バージョン
とすることでnodeがインストールされていることを確認しました。
ついでにnpmもインストールされています。
npm -v
まずはNode.js、及びnpmのインストールが完了です。
Vue.jsをインストール
こちらを参考にやっていきます。
プロジェクトを作成したいフォルダに移動して、以下。
npm create vue@latest
色々設定を入力した後（こちらは必要に応じて）
cd <your-project-name> // package.jsonというファイルがあるのでそこに移動
npm install // package.jsonの中のパッケージを全部インストール
npm run dev // package.jsonの中のscriptsセクションの"dev"の中に書かれているコマンドを実行
色んな文字が出てきますが
http://localhost:5173/
とあるので、自分のローカルの5173ポートでvueをホスティングしているはず。
ブラウザでアクセスしてみると、スタート画面が表示されました。
ミッションコンプリート
今回は無事任務完了です。
それぞれのコマンドやインストールしたものがどんな意味を持っていてどういう関係性なのか、を考えながらやったことで、次は何も見なくてもいけそうです。