nodenv をインストール

brew install node でいいやって人は読み飛ばし可。「yarn をインストール」まで進んじゃって下さい。

node のバージョン管理ツールは nvm, nodebrew, ndenv などなど、多すぎだろ！ てくらいいっぱいありますが

とりあえず新しめで人気らしい nodenv を使います。

Ruby の rbenv, Python の pyenv, PHP の phpenv などと同様のコマンドラインオプションが使えるので、これらの言語を扱う場合に混乱が少なくて済みますし。

インストールします。

$ brew install nodenv

.bashrc に以下を追記してターミナルを再起動

eval "$(nodenv init -)"

動作確認。OK と表示されれば OK

$ curl -fsSL https://github.com/nodenv/nodenv-installer/raw/master/bin/nodenv-doctor | bash
Checking for `nodenv' in PATH: /usr/local/bin/nodenv
Checking for nodenv shims in PATH: not found
  The directory `/Users/monmon/.nodenv/shims' must be present in PATH for nodenv to work.
  Please run `nodenv init' and follow the instructions.

Checking `nodenv install' support: /usr/local/bin/nodenv-install (node-build 4.5.0)
Counting installed Node versions: none
  There aren't any Node versions installed under `/Users/monmon/.nodenv/versions'.
  You can install Node versions like so: nodenv install 2.2.4
Auditing installed plugins: OK

node をインストール

Vue.js のインストールには Node 8.9 以上が必要（8.11.0 以上推奨）です。

※現時点で最新版の node 12.0.0 は問題があるようなので避けましょう。バイナリレベルで何か問題があるようです。友人が 12.0.0 で vue プロジェクトを作っている最中に見たことないエラーにハマってました…

nodenv でインストール可能なバージョン一覧を確認。

$ nodenv install -l | less

今回は 11.14.0 をインストール。

$ nodenv install 11.14.0

確認。インストールしただけだと、デフォルトで使うバージョンとして設定されていません。（以下の例では macOS にデフォルトで入ってる node が有効になっています）

$ nodenv versions
* system
  11.14.0 (set by /Users/monmon/.nodenv/version)

デフォルトで使うバージョンとして設定

$ nodenv global 11.14.0

再度確認。インストールしたバージョンに “*” が付いていればOK。

$ nodenv versions
  system
* 11.14.0 (set by /Users/monmon/.nodenv/version)

パスの再解決。node コマンドがインストールされたことをシェルがまだ気付いていない場合があるので、パスの再解決 (rehash) を促して node コマンドを見つけてもらいます。

$ nodenv rehash

node コマンドが実行できることを確認。

$ node -v
v11.14.0

ついでに npm コマンドも確認。

$ npm -v
6.7.0

yarn をインストール

node と一緒にパッケージマネージャの npm もインストールされましたが、npm より高速な yarn を使いたいのでインストールします。

$ npm install -g yarn
/Users/monmon/.nodenv/versions/11.14.0/bin/yarn -> /Users/monmon/.nodenv/versions/11.14.0/lib/node_modules/yarn/bin/yarn.js
/Users/monmon/.nodenv/versions/11.14.0/bin/yarnpkg -> /Users/monmon/.nodenv/versions/11.14.0/lib/node_modules/yarn/bin/yarn.js
+ yarn@1.16.0
added 1 package in 0.182s

確認

$ yarn -v
1.15.2

Vue CLI 3 をインストール

yarn で @vue/cli をインストールします。

vue-cli はバージョン2系まで、バージョン3系からは @vue/cli とパッケージ名が異なるので注意しましょう。

$ yarn global add @vue/cli

確認

$ vue --version
3.7.0

とりあえず今回はここまで！