Windowsでのnvmの使い方～vue uiの起動までを解説

筆者

この記事では、Node Version Manager (nvm) for WindowsをつかってNode.jsのバージョン管理をしつつ、Vue.jsのGUIであるVueプロジェクトマネージャーを使うまでの手順を解説しています。動作はWindows 7 (x64)で確認しています。

ほんとうはnodistを使ってNode.jsのバージョン管理をしたかったのですが、nodistを使うとvue uiコマンドで起動するはずのVueプロジェクトマネージャがローディング状態のまま先に進まないという現象が起きました。同じような現象で困っている方の助けになればというのと、自分のためのメモのために書き記します。

不要なアプリの削除～nvmのインストール

nvmをインストールする前に、もしインストールしている場合はNode.js、nodistをアンインストールしておきます。パソコン内にNode.js、nodistが存在しない状態になったら、GitHubからnvm for windowsをダウンロードします。いろいろと選択肢がありますが、僕はバージョン1.1.7（2019/4/17時点での最新版）のnvm-setup.zipをダウンロードしました。

ダウンロードが完了したら、zipファイルを解凍して、nvm-setup.exeを実行します。「ライセンスの同意」「nvmのインストールフォルダ」「Node.jsのシンボリックリンクの設置フォルダ」について聞かれますが、初期状態のままNextボタンをクリックしていけば大丈夫です。

インストールが完了したら、nvmの動作確認のためにターミナルを起動します。ターミナルでnvm versionコマンドを実行してみましょう。下記のようにバージョン情報が表示されれば正常に動作しています。これでnvmがつかえるようになりました。

nvmによるNode.jsのインストールやバージョン切り替え

まず、nvmでインストールできるNode.jsのバージョンを確認してみます。nvm list availableというコマンドを実行すると、下記のようにインストール可能なNode.jsの一覧が表示されます。

今回は2019/4/17時点での推奨版であるバージョン10.15.3をインストールしていきます。nvm install 10.15.3コマンドを実行します。

インストールが完了したらnvm listコマンドでNode.jsのバージョンを確認してみましょう。下記のようにバージョン情報が表示されればNode.jsのインストールは正常に完了しています。

つぎに、別バージョンのNode.jsをインストールして、バージョンの切り替えを試してみましょう。インストールするバージョンは何でもいいのですが、ここでは2019/4/17時点での最新バージョン11.14.0をインストールします。

nvm listコマンドで使用できるNode.jsのバージョンを確認してみます。

nvm useコマンドでNode.jsのバージョン10.15.3を使えるように設定します。

node -vコマンドでNode.jsのバージョンを確認してみましょう。下記のようにバージョン情報が表示されればNode.jsのバージョン10.15.3が使えるようになっています。

Node.jsのバージョンを切り替える場合もnvm useコマンドを使います。

最後に、nvm listコマンドで現在どのバージョンのNode.jsを使っているか確認してみましょう。「*」印が付いている方が現在使っているNode.jsのバージョンになります。

nvmの使い方は以上です。

vueプロジェクトマネージャのインストール～起動

Vueプロジェクトマネージャをインストールする前に、Node.jsのバージョンを10.15.3（2019/4/17時点での推奨版）に切り替えておきましよう。

Node.js v10.15.3に切り替えたら、ここに@vue/cliをインストールします。

インストールが完了したら、vue uiを起動してみます。

Vueプロジェクトマネージャが立ち上がり下記の画面が表示されれば成功です。

筆者

Webフロントエンド開発ではNode.jsのバージョン管理は必要不可欠だと思います。バージョン管理をしないで、Node.jsのバージョンをアップデートしてしまうと、過去プロジェクトで使用していたライブラリが動かなくなったりと不具合が発生してしまうことがあるからです。

nvmの使い勝手はnodistと変わらない印象です。nodistでうまくいかなかったらnvmを試してみるといいかと思います。