Quantcast
Channel: Node.jsタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8952

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

$
0
0

スタンドアロン版の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をインストールしていきます。

ターミナル コマンド
brewinstallnodebrew

・確認

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

ターミナル コマンド
nodebrew-v
ターミナル 結果
nodebrew1.0.1Usage:nodebrewhelpShowthismessagenodebrewinstall<version>Downloadandinstall<version>(frombinary)nodebrewcompile<version>Downloadandinstall<version>(fromsource)nodebrewinstall-binary<version>Aliasof`install`(Forbackwardcompatibility)nodebrewuninstall<version>Uninstall<version>nodebrewuse<version>Use<version>nodebrewlistListinstalledversionsnodebrewlsAliasfor`list`nodebrewls-remoteListremoteversionsnodebrewls-allListremoteandinstalledversionsnodebrewalias<key><value>Setaliasnodebrewunalias<key>Removealiasnodebrewclean<version>|allRemovesourcefilenodebrewselfupdateUpdatenodebrewnodebrewmigrate-package<version>InstallglobalNPMpackagescontainedin<version>tocurrentversionnodebrewexec<version>--<command>Execute<command>usingspecified<version>Example:#installnodebrewinstallv8.9.4#useaspecificversionnumbernodebrewusev8.9.4

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

Node.jsのインストール

・インストール

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

ターミナル コマンド
nodebrewinstall-binarylatest
ターミナル 結果
Fetching:https://nodejs.org/dist/v15.5.0/node-v15.5.0-darwin-x64.tar.gz########################################################################100.0%Installedsuccessfully

・有効化

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

ターミナル コマンド
nodebrewuselatest
ターミナル 結果
usev15.5.0

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

・パスを通す

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

ターミナル コマンド
echo'exportPATH=$HOME/.nodebrew/current/bin:$PATH'>>~/.bash_profile

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

ターミナル コマンド
node-v
ターミナル 結果
v15.5.0

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

Vue.js devtoolsのインストール

・インストール

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

ターミナル コマンド
npminstall-g@vue/devtools

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

ターミナル 結果
added201packages,andaudited202packagesin21s6packagesarelookingforfundingrun`npmfund`fordetailsfound0vulnerabilities

・起動

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

ターミナル コマンド
vue-devtools

・結果

別ウインドウが開いて以下の画面が出れば起動成功です。
お疲れ様でした!
スクリーンショット 2021-01-01 16.50.48.png


Viewing all articles
Browse latest Browse all 8952