とりあえずMacでVueの環境を整えてみた

スタンドアロン版のVue.js devtoolsをmacに入れていくメモ。
なおNode.JSのインストールまでは
[MacにNode.jsをインストール](https://qiita.com/kyosuke5_20/items/c5f68fc9d89b84c0df09)
を参考にさせていただいています。

#必要なこと
1.Homebrewのインストール(済)
2.nodebrewのインストール
3.Node.jsのインストール
4.Vue.js devtoolsのインストール

###Homebrew
HomebrewはMacでのソフトウェアや拡張機能の管理を行うパッケージマネージャです。便利です。

Homebrewのインストールについては
[Homebrewのインストール](https://qiita.com/zaburo/items/29fe23c1ceb6056109fd)
を参照してます。




#環境
開始段階の環境として
・mac OS Catalina 10.15.7
・Homebrew 2.7.1
はインストール済みです。
#nodebrewのインストール
###・インストール
ターミナルを開いてnodebrewをインストールしていきます。

```java:ターミナル&#x20;コマンド
brew install nodebrew
```

###・確認
インストールできたか確認してみます。

```java:ターミナル&#x20;コマンド
nodebrew -v
```

```java:ターミナル&#x20;結果
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 backward 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
```

こんな感じでツラツラと出てきたらOKです。

#Node.jsのインストール
###・インストール
今回はとりあえず最新版をインストールしようと思います。

```java:ターミナル&#x20;コマンド
nodebrew install-binary latest
```

```java:ターミナル&#x20;結果
Fetching: https://nodejs.org/dist/v15.5.0/node-v15.5.0-darwin-x64.tar.gz
######################################################################## 100.0%
Installed successfully
```

###・有効化
最新版をそのまま有効化していきます。

```java:ターミナル&#x20;コマンド
nodebrew use latest
```

```java:ターミナル&#x20;結果
use v15.5.0
```
今回はインストールされている最新版がv15.5.0だったので、これでOKです。

###・パスを通す
ターミナルから起動できるようにパスを通します。

```java:ターミナル&#x20;コマンド
echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile
```

確認のためターミナルで以下のコマンドを実行します。

```java:ターミナル&#x20;コマンド
node -v
```

```java:ターミナル&#x20;結果
v15.5.0
```
先程有効化したv15.5.0が表示されました。
これでNode.jsのインストールは完了です。

#Vue.js devtoolsのインストール

###・インストール
最後に本命のVue.js devtoolsをインストールしていきます。
引き続きターミナルで以下のコマンドを実行します。

```java:ターミナル&#x20;コマンド
npm install -g @vue/devtools
```
なんやかんや出てきます。

```java:ターミナル&#x20;結果
added 201 packages, and audited 202 packages in 21s

6 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
```
###・起動
インストールできたようなので、動作確認していきます。

```java:ターミナル&#x20;コマンド
vue-devtools
```
###・結果
別ウインドウが開いて以下の画面が出れば起動成功です。
お疲れ様でした!
![スクリーンショット 2021-01-01 16.50.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/995717/f95e37a7-fd8d-704c-b168-d45a226f96b6.png)