Vue.jsの環境構築

# はじめに
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）](https://qiita.com/minuro/items/fe0ce678bc2963b64209)

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/ 
```

以下のようなページが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311225/2d8b1d96-85ce-d3d2-a4b7-a7570f88daa8.png)