MacでVueCLIを使うまでの最速手順
2021年09月04日現在
目標
前提条件
ターミナルが使用しているシェルは「zsh」を前提とする。
「bash」を使用している場合は「.zshrc」を「.bashrc」に読み替えてください。
何を言っているのかわからないという人は以下のサイトを参考にしてください。
シェルってなに？bashとzsh、自分のMacはどっちを使ってるの？ 新macOS Catalina が zsh を標準にするって聞いたので Mojave のまま移行してみた
XCodeをインストールする
AppStoreでXCodeを検索してインストールする
homebrewをインストールする
homebrewはでデファクトスタンダードなパッケージマネージャーです。 対応するアプリケーションのインストールやバージョン管理ができるアプリケーション
詳しくは公式サイトを確認してください。
ターミナルで下記のコマンドからインストールできます。
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
パスワードを尋ねられた場合は、インストールしているMacのパスワードを入力してください。
インストール後は下記のコマンドで確認することができます。
$ brew --version Homebrew 2.4.6 Homebrew/homebrew-core (git revision 5218; last commit 2020-07-14)
nodebrewをインストールする
Nodeのバージョンを管理するnodebrewをインストールします。 Vue CLIはnpmでインストールします。 npmはnodebrewをインストールすることで使用可能になります。
~/.nodebrew/srcを作成しないとエラーになります。
$ mkdir -p ~/.nodebrew/src $ nodebrew install-binary latest $ nodebrew list v14.5.0 current: v14.5.0
インストールしたバージョンを使えるようにします。
$ nodebrew use 14.5.0 use 14.5.0
npmコマンドを設定する
nodebrewをインストールしただけでは、ターミナルでnpmコマンドが認識されません。 パスを通してnpmコマンドを使えるようにします。
$ ls $HOME/.nodebrew/current/bin node nodebrew npm npx $ open ~/.zshrc
.zshrcに以下を追加して保存する。
export PATH=$PATH:$HOME/.nodebrew/current/bin
npmコマンドが有効か確認する
npm -v 6.14.5
Vue CLIをインストールする
$ npm install -g @vue/cli
Vueのパスを通す。
このままではターミナルでvueコマンドが使えないので下記のコマンドを実行してパスを通す。 XXXXXXXはログインしているユーザー名に変える
$ open ~/.zshrc
.zshrcに以下を追加して保存する。保存後にターミナルを再起動する。
export PATH=$PATH/Users/XXXXXXX/npm/bin:$PATH
Vueのパスが通ったか確認する
$ vue --version @vue/cli 4.4.6
以上
