記事を書いた理由
プログラミング学習歴三ヶ月程度の超初心者です。Vue CLI3を導入するためにあちこちで参照した知識を備忘録的にひとつにまとめた記事です。同じような初心者の学習の助けになれば幸いです。
全体の流れ
1.homebrewをインストール
2.homebrewを使ってnodebrewをインストール
3.nodebrewを使ってNode.jsをインストール
4.Vue CLI3をインストール
5.Vue CLI3でプロジェクトを立てる
Node.jsはそのまま公式ホームページからインストールしてもいいんですがnodebrewというバージョン管理システムを導入した上でインストールした方が後々便利です。そしてそのnodebrewは、homebrewというパッケージ管理システムを導入した上でインストールした方が後々便利です。
パッケージとは、実行ファイルや設定ファイルなど様々なファイルを一つのファイルとしてまとめたものです。パッケージ管理システムを使えばパッケージのインストール（アンインストール）作業を簡単に行えます。また、パッケージ管理システムを導入することでインストールしたパッケージやライブラリの依存関係などが管理できて便利です。
Node.jsのバージョンを管理できるツールであるnodebrewを、homebrewによって導入します。
homebrewの導入
ここから先はほとんどコマンドを入力することでMacを操作することになります。コマンドとはMacに対して呪文を唱えるようなもので、ソフトのインストールや編集などが全て文字の入力だけで操作できます。以下のような記事を読んだり、調べてみたりしてください。
Macでコマンドラインを使おう（超初心者向け）
まずはhomebrewの導入の仕方を説明します。
先ほど説明しましたがhomebrewとはパッケージ管理システムです。何ができるのかというと、このhomebrewから様々なパッケージをコマンド一つでインストールやアンインストールでき、インストールしたものを一元的に管理できます。
以下のコマンドをターミナルに入力することでインストールできます。
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
最新のコマンドはHomebrewで確認してください。
インストールが終了したらちゃんとインストールできたか確認しましょう。
brew doctor
とコマンドを入力し、
Your system is ready to brew.
と出てくればインストールは成功です。
nodebrewの導入
さきほど入れたhomebrewを使ってnodebrewをインストールしましょう。
homebrewはbrew install パッケージ名というコマンドでパッケージをインストールできます。
brew install nodebrew
インストールが終了したら確認しましょう。一番手軽な確認方法はバージョン情報を確認することです。
nodebrew -v
バージョン情報が出てきたらインストールは成功です。次にパスを通しましょう。
パスを通す
「パスを通す」とは、Macに実行ファイルの場所を教えてあげる事です。 パスを通すことで、コマンドが実行できます。ファイルにパスを通すための情報を書き加えることで、パスが通ります。ここで使用するファイルは.bash_profileというファイルです。このファイルはホームディレクトリ直下にありますが普段は見えないように隠されています。存在していない場合もあるので、その場合はファイルを作成する必要があります。
まずは.bash_profileファイルがあるかどうかの確認です。
ホームディレクリをカレントディレクトリにしたうえで、
ls -a
というコマンドを打ちます。これでホームディレクトリ直下のファイルが普段は見えないように隠されているものも含めてすべて表示されます。このなかに.bash_profileファイルがあれば問題はないですが、ない場合は自分で作る必要があります。
以下のコマンドを打つことで.bash_profileファイルを作成できます。
もちろんホームディレクトリをカレントディレクトリにした状態で作りましょう。
touch .bash_profile
コマンドを入力したあと、もう一度先ほどのls -aを打つことでファイルが作成できたか確認できます。作成が成功したらそのファイルにパスを通します。
パスを通すための具体的な方法は、ファイルに情報を書き加えることです。.bash_profileに情報を書き加える必要があります。そのためのコマンドが以下です。
vi ~/.bash_profile
viコマンドと呼ばれるこのコマンドを入力することで.bash_profileに情報を書き加えられる編集状態になります。
注意するべきは、このviコマンドを入力することで、画面がファイルの編集画面へ移動することです。viコマンドによるファイルの編集はターミナルでのコマンドとは勝手が違うため、以下のリファレンスなどを参考にしながら編集してください。
viコマンド（vimコマンド）リファレンス
パスを通すためのコマンドは以下の通りです。コピペして書き加えてください。
export PATH=$HOME/.nodebrew/current/bin:$PATH
以上を入力すればパスの追加は完了です。画面を元に戻すために、:wqと入力しましょう。この:wqもviコマンドの一種です。
この後、bash_profileを更新して先ほど入力した設定を反映させる必要があります。
以下を入力することで反映します。
source ~/.bash_profile
ここまでできたらパスを通すことまで完了です。
nodebrew setup
以上のコマンドを押してnodebrewのセットアップをします。これによってNode.jsのインストールに進めます。
Node.jsのインストール
nodebrewでインストールできるNode.jsのバージョンは以下のコマンドで確認できます。
nodebrew ls-all
大量のバージョンが画面に表記されたと思います。この中から好きなバージョンを選んでインストールして、また不具合が起きるなど気に入らなくなったら別のものをインストールして使用できます。これがnodebrewというバージョン管理システムを使う利点の一つです。
確認したらインストールしましょう。例えばバージョン10.1.0がインストールしたい場合は以下のコマンドです。
nodebrew install-binaly v10.1.0
その時点での安定版がインストールしたければバージョン情報をstableに、最新版がインストールしたければlatestを指定します。
nodebrew install-binaly stable
nodebrew install-binaly latest
インストールが終わったら、どのバージョンを使用するか以下のように宣言しましょう。これをしないと使用できません。
nodebrew use stable
使いたいバージョンが指定できてるか確認しましょう。
以下のコマンドでcurrentが指定したバージョンになっていればOKです。
nodebrew ls
最後の確認をしておきましょう。
node -v
バージョンが表示されたらNode.jsのインストールは完了です。Node.jsをインストールすることでnpmも同時にインストールされています。npm -vとコマンドを打つことでバージョンを確認できます。
Vue CLI3のインストール
ここまでできたらようやくVue CLI3のインストールに進みます。
以下のコマンドでインストールできます。
sudo npm install -g vue-cli
先頭のsudoとは管理者権限を表すコマンドです。上記のコマンドはシステム全体としてインストールされるものなので、管理者としてコマンドを入力する必要があります。パスワードを聞かれますが、Macを設定する際に決めたパスワードを入力することでインストールが開始されます。
バージョンを確認します。
vue --version
正しいバージョンが出たら、Vue CLI3のインストールはこれで終わりです。
プロジェクトを作成する
Vue CLI3では、アプリケーションの開発はプロジェクトという単位で行われます。
プロジェクトの作成はvue create プロジェクト名で作成できます。
例えばmyprojectというプロジェクトを作成したい場合は以下の通りです。
vue create myproject
このとき、
?Please pick a preset: default
(babel, eslint)
と質問されます。これはbabelというトランスパイラ、ESlintというJavaScriptの検証ツールを使うかどうかの質問です。そのほかの細かい設定も選択できますが、このままEnterキーを押して特に問題ないです。
これでプロジェクトの作成が始まりますが、npm側の問題によってpermission deniedと書かれたエラーが起きる場合があります。
これはさきほどsudoコマンドでシステム全体にインストールしたことによって起きた管理者権限の問題です。
sudo chown -R whoami ~/.npm
上記のコマンドのwhoamiをホームディレクトリ名に変えて打ち込んでください（そのままコピペしてはダメです）。これでもう一度プロジェクトを作成してもエラーは出ないと思います。
それでもpermission deniedエラーが出る場合、こちらの記事が助けになるかもしれません。
npmでpermission deniedになった時の対処法[mac]
次に作成されたプロジェクトを実行します。
npm run serve
上記のコマンドでプロジェクトが実行されます。DONE Compiled successfullyと出たら成功です。Node.jsの開発用Webサーバでプロジェクトが動作されています。Webブラウザでhttp://localhost:8080/にアクセスするとVue CLI3によって作成されたサンプルのWebページが表示されます。ctr+cキーで終了できます。
npm run build
終了した状態で上記のコマンドを打つと、公開用のファイルが作成されます。
最後に
これでVue CLI3を使ったVueアプリケーションの開発ができるようになりました。Vue CLI3を使うとWebブラウザベースのGUI管理ツールが使えるようになります。
最後にGUI管理ツールの起動コマンドを載せておきます。
vue ui
Vueプロジェクトマネージャの画面が表示され、Webブラウザでプロジェクトが管理できて便利です。プラグインの画面からVue RouterやVuexの追加なども簡単に行えます。
参考リンク・文献
NodebrewでNodeをインストールする
nodebrewでNode.jsをインストールする。
VueCLI3をmacで使用するまで
Vue.js を vue-cli を使ってシンプルにはじめてみる
Vue CLI 3の変更点・使い方(vue-cliから@vue/cliにアップデート)
Node.jsをMacにインストール！（Homebrew→Nodebrew→Node.js順にインストール）
node.jsをインストール nodebrewを使って管理する
MacでPATHを通す（ユーザー単位 or 全ユーザー）
.bash_profileと.bashrcのまとめ
OS X のディレクトリ構成
viコマンド（vimコマンド）リファレンス
PATHを通すために環境変数の設定を理解する (Mac OS X)
ターミナルの設定ファイル.bash_profileを設置する
nodebrewでnodeのバージョンを切り替える方法
Unhandled Rejection Errors
npmでpermission deniedになった時の対処法[mac]
いまさら聞けない！npmのこれだけは知っておきたい基礎知識
ファイルの所有者を現在のユーザーに変更する
homebrewとは何者か。仕組みについて調べてみた
いちばんやさしい Vue.js 入門教室