vue-cli インストール手順（ver. 2018 - 2019）

宮崎在住エンジニアのジョウ(@JotarO_Oyanagi) です。

2018年9月現在、vue-cli　をインストールする手順として、「このツール、手順でインストールしておくと、今後使える構成なんじゃないか」というものをご紹介します。

TL;DR

• これから vue-cli をインストールする方に向けた内容です。
• anyenv、ndenv、yarn を使用してインストールします。
• すでに Node.js や、そのバージョン管理ツールをインストールされている方で、anyenv、ndenv を使用される方は Node.js をアンインストールしておく必要があります。

参考：Mac OS X からNode.jsをアンインストールする

anyenv のインストール＆設定

各言語のパッケージマネージャーのパッケージマネージャーです（ややこしい）。

参考：anyenv

インストール

$ git clone https://github.com/riywo/anyenv ~/.anyenv

設定

$ echo 'export PATH="$HOME/.anyenv/bin:$PATH"' >> ~/.bash_profile
$ echo 'eval "$(anyenv init -)"' >> ~/.bash_profile
$ source ~/.bash_profile

ndenv のインストール

Node.js のバージョン管理ツールです。

$ anyenv install ndenv
$ source ~/.bash_profile

node-build のインストール

ndenv で node をインストールするためにインストールします。

$ git clone https://github.com/riywo/node-build.git $(ndenv root)/plugins/node-build

node のインストール

vue-cli をインストールするために。

$ ndenv install v8.11.4
$ ndenv rehash
$ ndenv global v8.11.4
$ node -v
v8.11.4

yarn のインストール

npm で vue-cli をインストールしてもいいのですが、インストール時間がより速いので yarn をパッケージマネージャーとして用意します。

$ npm install -g yarn
$ source ~/.bash_profile

vue-cli のインストール

いよいよ vue-cli のインストールです！

$ yarn global add @vue/cli

あとは

以下のコマンドで、バージョン情報が表示されれば完了です！

$ vue --version