M1 MacにVue CLIを導入する

はじめに

M1 Mac にVue CLIを導入した時のメモ。
nvmやnodeの導入も初めて。

手順

nvmをインストール。

% brew install nvm

何か言われるので、

Please note that upstream has asked us to make explicit managing
nvm via Homebrew is unsupported by them and you should check any
problems against the standard nvm install method prior to reporting.

You should create NVM's working directory if it doesn't exist:

  mkdir ~/.nvm

Add the following to ~/.zshrc or your desired shell
configuration file:

  export NVM_DIR="$HOME/.nvm"
  [ -s "/opt/homebrew/opt/nvm/nvm.sh" ] && . "/opt/homebrew/opt/nvm/nvm.sh"  # This loads nvm
  [ -s "/opt/homebrew/opt/nvm/etc/bash_completion.d/nvm" ] && . "/opt/homebrew/opt/nvm/etc/bash_completion.d/nvm"  # This loads nvm bash_completion

You can set $NVM_DIR to any location, but leaving it unchanged from
/opt/homebrew/opt/nvm will destroy any nvm-installed Node installations
upon upgrade/reinstall.

言われた通りにディレクトリ作成してnvmにパスを通す。

% mkdir ~/.nvm
% open ~/.zshrc
export NVM_DIR="$HOME/.nvm"
[ -s "/opt/homebrew/opt/nvm/nvm.sh" ] && . "/opt/homebrew/opt/nvm/nvm.sh"  # This loads nvm
[ -s "/opt/homebrew/opt/nvm/etc/bash_completion.d/nvm" ] && . "/opt/homebrew/opt/nvm/etc/bash_completion.d/nvm"  # This loads nvm bash_completion

ファイルの変更を適用。

% source ~/.zshrc  

パス開通確認。

% nvm version
v16.0.0

登録されているNode.jsバージョンの確認。

% nvm ls-remote
...
       v15.13.0
       v15.14.0
        v16.0.0

最新をインストール。

% nvm i v16.0.0

v16.0.0は2021/4/20にリリース（この記事の３日前）。
このバージョンからM1に正式に対応したらしい。
ちょっと嬉しい。

インストール内容の確認。

% node -v
v16.0.0

% node -p process.arch
arm64

% nvm current
v16.0.0

% npm -v
7.10.0

vue CLIのインストール。

% npm install -g @vue/cli

インストール内容の確認。

% vue --version
@vue/cli 4.5.12