はじめに
Vue.jsの勉強をした際に、環境構築をしたので、手順を残しておきます。
構築する環境
macOS Mojave 10.14.5
nodebrew: 1.0.1
npm: 6.9.0
node: 12.6.0
vue: 3.9.2
nodebrewのインストール
まずはNode.jsをインストールするために、nodebrewをインストールします。
nodebrewとはNode.jsのバージョンを管理するツールです。
nodebrewのインストールにはhomebrewが必要なのでインストールしておきます。
こちらは以前の記事内で書いているので省略します。
MacでRubyの環境構築（Homebrew、rbenv）
homebrewインストール後に、以下のコマンドを実行してnodebrewをインストールします。
brew install nodebrew
インストール後に以下の内容を.bash_profileファイルに追記します。
（.bash_profileは環境によります。）
export PATH=$HOME/.nodebrew/current/bin:$PATH
追記後、以下のコマンドを実行しておきます。
source .bash_profile
以下のコマンドを実行して、バージョン情報などが表示されたら成功です。
nodebrew help
そのままでは、Nodeのインストールができないので、以下のコマンドを実行しておきます。
nodebrew setup
Node.jsのインストール
nodebrew ls-remoteでインストール可能なバージョン一覧、nodebrew lsで現在インストールしているバージョン一覧を確認できます。
$ nodebrew ls-remote
v0.0.1 v0.0.2 v0.0.3 v0.0.4 v0.0.5 v0.0.6
v0.1.0 v0.1.1 v0.1.2 v0.1.3 v0.1.4 v0.1.5 v0.1.6 v0.1.7
v0.1.8 v0.1.9 v0.1.10 v0.1.11 v0.1.12 v0.1.13 v0.1.14 v0.1.15
v0.1.16 v0.1.17 v0.1.18 v0.1.19 v0.1.20 v0.1.21 v0.1.22 v0.1.23
v0.1.24 v0.1.25 v0.1.26 v0.1.27 v0.1.28 v0.1.29 v0.1.30 v0.1.31
v0.1.32 v0.1.33 v0.1.90 v0.1.91 v0.1.92 v0.1.93 v0.1.94 v0.1.95
v0.1.96 v0.1.97 v0.1.98 v0.1.99 v0.1.100 v0.1.101 v0.1.102 v0.1.103
v0.1.104
v0.2.0 v0.2.1 v0.2.2 v0.2.3 v0.2.4 v0.2.5 v0.2.6
v0.3.0 v0.3.1 v0.3.2 v0.3.3 v0.3.4 v0.3.5 v0.3.6 v0.3.7
v0.3.8
v0.4.0 v0.4.1 v0.4.2 v0.4.3 v0.4.4 v0.4.5 v0.4.6 v0.4.7
v0.4.8 v0.4.9 v0.4.10 v0.4.11 v0.4.12
v0.5.0 v0.5.1 v0.5.2 v0.5.3 v0.5.4 v0.5.5 v0.5.6 v0.5.7
v0.5.8 v0.5.9 v0.5.10
v0.6.0 v0.6.1 v0.6.2 v0.6.3 v0.6.4 v0.6.5 v0.6.6 v0.6.7
v0.6.8 v0.6.9 v0.6.10 v0.6.11 v0.6.12 v0.6.13 v0.6.14 v0.6.15
v0.6.16 v0.6.17 v0.6.18 v0.6.19 v0.6.20 v0.6.21
v0.7.0 v0.7.1 v0.7.2 v0.7.3 v0.7.4 v0.7.5 v0.7.6 v0.7.7
v0.7.8 v0.7.9 v0.7.10 v0.7.11 v0.7.12
v0.8.0 v0.8.1 v0.8.2 v0.8.3 v0.8.4 v0.8.5 v0.8.6 v0.8.7
v0.8.8 v0.8.9 v0.8.10 v0.8.11 v0.8.12 v0.8.13 v0.8.14 v0.8.15
v0.8.16 v0.8.17 v0.8.18 v0.8.19 v0.8.20 v0.8.21 v0.8.22 v0.8.23
v0.8.24 v0.8.25 v0.8.26 v0.8.27 v0.8.28
v0.9.0 v0.9.1 v0.9.2 v0.9.3 v0.9.4 v0.9.5 v0.9.6 v0.9.7
v0.9.8 v0.9.9 v0.9.10 v0.9.11 v0.9.12
v0.10.0 v0.10.1 v0.10.2 v0.10.3 v0.10.4 v0.10.5 v0.10.6 v0.10.7
v0.10.8 v0.10.9 v0.10.10 v0.10.11 v0.10.12 v0.10.13 v0.10.14 v0.10.15
v0.10.16 v0.10.17 v0.10.18 v0.10.19 v0.10.20 v0.10.21 v0.10.22 v0.10.23
v0.10.24 v0.10.25 v0.10.26 v0.10.27 v0.10.28 v0.10.29 v0.10.30 v0.10.31
v0.10.32 v0.10.33 v0.10.34 v0.10.35 v0.10.36 v0.10.37 v0.10.38 v0.10.39
v0.10.40 v0.10.41 v0.10.42 v0.10.43 v0.10.44 v0.10.45 v0.10.46 v0.10.47
v0.10.48
v0.11.0 v0.11.1 v0.11.2 v0.11.3 v0.11.4 v0.11.5 v0.11.6 v0.11.7
v0.11.8 v0.11.9 v0.11.10 v0.11.11 v0.11.12 v0.11.13 v0.11.14 v0.11.15
v0.11.16
v0.12.0 v0.12.1 v0.12.2 v0.12.3 v0.12.4 v0.12.5 v0.12.6 v0.12.7
v0.12.8 v0.12.9 v0.12.10 v0.12.11 v0.12.12 v0.12.13 v0.12.14 v0.12.15
v0.12.16 v0.12.17 v0.12.18
v4.0.0 v4.1.0 v4.1.1 v4.1.2 v4.2.0 v4.2.1 v4.2.2 v4.2.3
v4.2.4 v4.2.5 v4.2.6 v4.3.0 v4.3.1 v4.3.2 v4.4.0 v4.4.1
v4.4.2 v4.4.3 v4.4.4 v4.4.5 v4.4.6 v4.4.7 v4.5.0 v4.6.0
v4.6.1 v4.6.2 v4.7.0 v4.7.1 v4.7.2 v4.7.3 v4.8.0 v4.8.1
v4.8.2 v4.8.3 v4.8.4 v4.8.5 v4.8.6 v4.8.7 v4.9.0 v4.9.1
v5.0.0 v5.1.0 v5.1.1 v5.2.0 v5.3.0 v5.4.0 v5.4.1 v5.5.0
v5.6.0 v5.7.0 v5.7.1 v5.8.0 v5.9.0 v5.9.1 v5.10.0 v5.10.1
v5.11.0 v5.11.1 v5.12.0
v6.0.0 v6.1.0 v6.2.0 v6.2.1 v6.2.2 v6.3.0 v6.3.1 v6.4.0
v6.5.0 v6.6.0 v6.7.0 v6.8.0 v6.8.1 v6.9.0 v6.9.1 v6.9.2
v6.9.3 v6.9.4 v6.9.5 v6.10.0 v6.10.1 v6.10.2 v6.10.3 v6.11.0
v6.11.1 v6.11.2 v6.11.3 v6.11.4 v6.11.5 v6.12.0 v6.12.1 v6.12.2
v6.12.3 v6.13.0 v6.13.1 v6.14.0 v6.14.1 v6.14.2 v6.14.3 v6.14.4
v6.15.0 v6.15.1 v6.16.0 v6.17.0 v6.17.1
v7.0.0 v7.1.0 v7.2.0 v7.2.1 v7.3.0 v7.4.0 v7.5.0 v7.6.0
v7.7.0 v7.7.1 v7.7.2 v7.7.3 v7.7.4 v7.8.0 v7.9.0 v7.10.0
v7.10.1
v8.0.0 v8.1.0 v8.1.1 v8.1.2 v8.1.3 v8.1.4 v8.2.0 v8.2.1
v8.3.0 v8.4.0 v8.5.0 v8.6.0 v8.7.0 v8.8.0 v8.8.1 v8.9.0
v8.9.1 v8.9.2 v8.9.3 v8.9.4 v8.10.0 v8.11.0 v8.11.1 v8.11.2
v8.11.3 v8.11.4 v8.12.0 v8.13.0 v8.14.0 v8.14.1 v8.15.0 v8.15.1
v8.16.0
v9.0.0 v9.1.0 v9.2.0 v9.2.1 v9.3.0 v9.4.0 v9.5.0 v9.6.0
v9.6.1 v9.7.0 v9.7.1 v9.8.0 v9.9.0 v9.10.0 v9.10.1 v9.11.0
v9.11.1 v9.11.2
v10.0.0 v10.1.0 v10.2.0 v10.2.1 v10.3.0 v10.4.0 v10.4.1 v10.5.0
v10.6.0 v10.7.0 v10.8.0 v10.9.0 v10.10.0 v10.11.0 v10.12.0 v10.13.0
v10.14.0 v10.14.1 v10.14.2 v10.15.0 v10.15.1 v10.15.2 v10.15.3 v10.16.0
v11.0.0 v11.1.0 v11.2.0 v11.3.0 v11.4.0 v11.5.0 v11.6.0 v11.7.0
v11.8.0 v11.9.0 v11.10.0 v11.10.1 v11.11.0 v11.12.0 v11.13.0 v11.14.0
v11.15.0
v12.0.0 v12.1.0 v12.2.0 v12.3.0 v12.3.1 v12.4.0 v12.5.0 v12.6.0
io@v1.0.0 io@v1.0.1 io@v1.0.2 io@v1.0.3 io@v1.0.4 io@v1.1.0 io@v1.2.0 io@v1.3.0
io@v1.4.1 io@v1.4.2 io@v1.4.3 io@v1.5.0 io@v1.5.1 io@v1.6.0 io@v1.6.1 io@v1.6.2
io@v1.6.3 io@v1.6.4 io@v1.7.1 io@v1.8.1 io@v1.8.2 io@v1.8.3 io@v1.8.4
io@v2.0.0 io@v2.0.1 io@v2.0.2 io@v2.1.0 io@v2.2.0 io@v2.2.1 io@v2.3.0 io@v2.3.1
io@v2.3.2 io@v2.3.3 io@v2.3.4 io@v2.4.0 io@v2.5.0
io@v3.0.0 io@v3.1.0 io@v3.2.0 io@v3.3.0 io@v3.3.1
$ nodebrew ls
v12.6.0
current: v12.6.0
実際にインストールする場合は、以下のコマンドを実行します。
nodebrew install-binary "バージョン"
（例：nodebrew install-binary v12.6.0）
また、nodebrew install-binary latestとすることで、最新バージョンをインストールすることができます。
次に、使用するバージョンを指定します。
nodebrew use "バージョン"
（例：nodebrew use v12.6.0）
こちらも、nodebrew use latestで最新バージョンを指定できます。
最後に、以下のコマンドを実行して、バージョンが表示されたら成功です。
node -v
また、npmも同時にインストールされていますので、以下のコマンドでバージョンを確認できます。
npm -v
vue-cliのインストール
vue-cliとは、Vue.jsの雛形などを作ってくれる開発ツールです。
以下のコマンドを実行してインストールします。
npm install -g @vue/cli
以下のコマンドを実行して、Vueのバージョンが表示されたら成功です。
vue -V
プロジェクトの作成
以下のコマンドを実行すると、Vue.jsのプロジェクトを作成できます。
vue create "プロジェクト名"
（例：vue create sample）
質問を聞かれますので、デフォルトとマニュアルを選択できます。
デフォルトであれば、そのままプロジェクトを作成してくれます。マニュアルの場合は、いくつか質問をされますので答えていきます。
プロジェクト作成後は、作成されたディレクトリに移動後、npm run serveを実行して、プロジェクトを起動します。
cd sample
npm run serve
以下のような表示が出ますので、http://localhost:8080/にアクセスすることで、雛形のページを表示できます。
App running at:
- Local: http://localhost:8080/
以下のようなページが表示されます。
