VueCLI3をmacで使用するまで

# VueCLI３をインストールする。
VueCLIをインストールするまで...
※この記事は2018年11月に書いたものです。
##　インストールの流れ
1. Homebrewのインストール
2. Nodebrewのインストール
3. Node.jsのインストール
4. VueCLIのインストール

##　1. Homebrewをインストール
Homebrewはmac用のパッケージマネージャーです
Homebrew：　https://brew.sh/index_ja

```:
 /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 
```

上のコマンドを実行してみてください。

インストールごは以下のコマンドを実行してみてください。
```　$ brew -v　```

```:
Homebrew 1.8.1
Homebrew/homebrew-core (git revision ed52; last commit 2018-11-04)
```

ちゃんとインストールされてると上のような結果になります。

##2. Nodebrewをインストール
先ほど紹介したHomebrewを使用してインストールします。

``` $ brew install nodebrew ```

インストール後に以下のコマンドを実行するとバージョンを確認できます。

```:
nodebrew 1.0.1

Usage:
    nodebrew help                         Show this message
    nodebrew install <version>            Download and install <version> (from binary)
    nodebrew compile <version>            Download and install <version> (from source)
    nodebrew install-binary <version>     Alias of `install` (For backword compatibility)
    nodebrew uninstall <version>          Uninstall <version>
    nodebrew use <version>                Use <version>
    nodebrew list                         List installed versions
    nodebrew ls                           Alias for `list`
    nodebrew ls-remote                    List remote versions
    nodebrew ls-all                       List remote and installed versions
    nodebrew alias <key> <value>          Set alias
    nodebrew unalias <key>                Remove alias
    nodebrew clean <version> | all        Remove source file
    nodebrew selfupdate                   Update nodebrew
    nodebrew migrate-package <version>    Install global NPM packages contained in <version> to current version
    nodebrew exec <version> -- <command>  Execute <command> using specified <version>

Example:
    # install
    nodebrew install v8.9.4

    # use a specific version number
    nodebrew use v8.9.4
```
- **nodebrewが使いやすいようにパスを通す。**

bashの場合

```:
$ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile
```

追加したあとターミナルを再起動

## 3. Node.jsのインストール
- **インストール**

```:
$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  
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　~~~~省略~~~~

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


v11.0.0   v11.1.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 install-binary latest
```

- バージョンを指定する場合
```$ nodebrew install-binary {version}
```

- **インストールされたnodeを有効化**

```$nodebrew ls```

```:
v11.1.0

current: none
```

必要なバージョンを有効化する。
``` $ nodebrew use version```

nodeのバージョンを確認する
``` $ node -v ```

```:
v10.13.0
```

ここで指定したバージョンもしくは最新版が表示されます。

npmのバージョンを確認する。
```$ npm -v```

```:
6.4.1
```

##4. VueCLI3のインストール
- **vue.jsの環境をインストールします。**

```:
$ npm install -g vue-cli
```
そしたら...

- **プロジェクトの作成**

作りたいディレクトリに移動して

```:
$ vue create myprojects
```

いくつか質問されるのでenterで進みます

```
Please pick a preset: default (babel, eslint)


Vue CLI v3.1.1
✨  Creating project in /Users/satousa/Documents/develop/vue/2018/myprojects.
🗃  Initializing git repository...
⚙  Installing CLI plugins. This might take a while...

⸨     ░░░░░░░░░░░░░⸩ ⠙ fetchMetadata: sill resolveWithNewModule get-stream@3.0.0 checking installable st
```

このようになります。

```
✨  Creating project in /Users/satousa/Documents/develop/vue/2018/myprojects.
🗃  Initializing git repository...
⚙  Installing CLI plugins. This might take a while...


> fsevents@1.2.4 install /Users/satousa/Documents/develop/vue/2018/myprojects/node_modules/fsevents
> node install

[fsevents] Success: "/Users/satousa/Documents/develop/vue/2018/myprojects/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node" already installed
Pass --update-binary to reinstall or --build-from-source to recompile

> yorkie@2.0.0 install /Users/satousa/Documents/develop/vue/2018/myprojects/node_modules/yorkie
> node bin/install.js

setting up Git hooks
done

added 1181 packages from 754 contributors in 34.213s
🚀  Invoking generators...
📦  Installing additional dependencies...

added 23 packages from 24 contributors, updated 2 packages and moved 5 packages in 14.464s
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project myprojects.
👉  Get started with the following commands:

 $ cd myprojects
 $ npm run serve
```

完了したらこのようになります
そしたら

```
$ cd myprojects
```

```
$ npm run dev
```

で動かせます。

以上でVueCLIのインストールは終了です。
お疲れ様でした！


## 参考：
https://www.hirooooo-lab.com/entry/development/install-node
https://qiita.com/kyosuke5_20/items/c5f68fc9d89b84c0df09
https://qiita.com/567000/items/dde495d6a8ad1c25fa43