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

スタンドアロン版のVue.js devtoolsをmacに入れていくメモ。
なおNode.JSのインストールまでは
MacにNode.jsをインストール
を参考にさせていただいています。

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

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

Homebrewのインストールについては
Homebrewのインストール
を参照してます。

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

ターミナル コマンド

brew install nodebrew

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

ターミナル コマンド

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 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のインストール
###・インストール
今回はとりあえず最新版をインストールしようと思います。

ターミナル コマンド

nodebrew install-binary latest

ターミナル 結果

Fetching: https://nodejs.org/dist/v15.5.0/node-v15.5.0-darwin-x64.tar.gz
######################################################################## 100.0%
Installed successfully

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

ターミナル コマンド

nodebrew use latest

ターミナル 結果

use v15.5.0

今回はインストールされている最新版がv15.5.0だったので、これでOKです。

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

ターミナル コマンド

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

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

ターミナル コマンド

node -v

ターミナル 結果

v15.5.0

先程有効化したv15.5.0が表示されました。
これでNode.jsのインストールは完了です。

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

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

ターミナル コマンド

npm install -g @vue/devtools

なんやかんや出てきます。

ターミナル 結果

added 201 packages, and audited 202 packages in 21s

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

found 0 vulnerabilities

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

ターミナル コマンド

vue-devtools

###・結果
別ウインドウが開いて以下の画面が出れば起動成功です。
お疲れ様でした!