Node.jsとVue.jsの環境構築（Mac)

# 概要
MacでVue.jsの環境構築を行った時のメモ。インストールの流れは以下の通り。

- Homebrewのインストール
- nodebrewのインストール
- node.jsのインストール
- vue.jsのインストール

# Homebrew
HomebrewはMacOS用のパッケージ管理ソフトである。
Debian系だとAPT、RedHat系だとYum、windowsだとNuget、chocolatyみたいなもの。

### Homebrewのインストール
[Homebrewの公式サイト](http://brew.sh/index_ja.html)にあるスクリプトを実行する。

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

インストール後は`brew -v`を入力するとバージョンを確認することができる

```bash:terminal
$ brew -v
Homebrew 2.1.15
Homebrew/homebrew-core (git revision 068d; last commit 2019-11-03)
```

# nodebrew
nodebrewはnode.jsのバージョン管理をするためのツールである。

### nodebrewのインストール
先ほどインストールしたHomebrewを用いて、nodebrewをインストールする。

```bash:terminal
$ brew install nodebrew
```

`nodebrew -v`でバージョンを確認する。

```bash:terminal
$ nodebrew -v
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
```

# node.js

### 準備
インストールする前に、フォルダを作っておく必要があるので、以下のコマンドを入力しておく。

```bash:terminal
$ mkdir -p ~/.nodebrew/src
```

### インストールできるバージョンの確認
`nodebrew ls-remote`でインストール可能なバージョンを確認する。

```bash:terminal
$ nodebrew ls-remote
v0.0.1    v0.0.2    v0.0.3    v0.0.4    v0.0.5    v0.0.6
  ...
```

### node.jsのインストール

- バージョンを指定してインストールする場合
    - `nodebrew install-binary {version}`
- 最新版をインストールをインストールする場合
    - `nodebrew install-binary latest`

私の場合、とりあえず最新版をインストール。
`nodebrew ls`でインストールしたバージョンを確認する。

```bash:terminal
$ nodebrew install-binary latest
$ nodebrew ls
v13.0.1

current: none
```

### インストールしたnodeを有効化する
`nodebrew use {version}`をターミナルに入力して、nodeを有効化する。

```bash:terminal
$ nodebrew use v13.0.1
$ nodebrew ls
v13.0.1

current: v13.0.1   <- ここがnoneではなく設定したバージョンになっていればOK
```


### `node`と`npm`のパスを通す
今のままでは、`node`コマンドや`npm`コマンドにパスが通っていないので、以下のコマンドを入力する（bashの場合）

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

**追記後、ターミナルを再起動する。**

### node.jsのインストール完了の確認
`node -v`と`npm -v`を入力して、バージョン名が表示されればインストールが完了している。

```bash:terminal
$ node -v
v13.0.1
$ npm -v
6.12.0
```

# Vue CLI
Vue CLI の公式ガイド
https://cli.vuejs.org/guide/installation.html
日本語訳
http://www.fumiononaka.com/Business/html5/FN1807001.html

### vue-cliのインストール
Vue.jsの開発支援用のコマンドをインストールする。

```bash:terminal
$ npm install -g @vue/cli
$ vue --version
@vue/cli 4.0.5
```

これで、インストール完了。

*[追記]あとで、node.jsのLTS版であるv12.13.0をいれました。*