とりあえず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

・結果

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