寝て起きて寝て

プログラミングが出来ない情報系のブログ

MacにVue CLI3を導入する

Vue

環境

macOS Catalina 10.15.4
VSCode
nodebrew 1.0.1
Node.js 12.16.2

Node.jsの導入

Vue CLI3を入れるためには、最低でもNode.jsのバージョン８．９以上が
インストールされていないと動かない。

Node.jsを導入するとNPMもついてくる。
VSCodeのターミナルから下記コマンドを実行してNode.jsが入っていないことを確認

$ node -v
bash: node: command not found

nodebrewのインストール

nodebrewは、Node.jsのバージョンを管理するためのツール。
（Ruby on RailsのBundler的な）

一応インストールされていないか確認

 nodebrew -v
bash: nodebrew: command not found

下記コマンドを実行してインストール

$ brew install nodebrew

インストール後バージョン確認

$ nodebrew -v
nodebrew 1.0.1

下記を実行してnodebrewでインストールできるnode.jsのバージョンを確認

$ nodebrew ls-remote

nodebrew経由でNode.jsをインストール

2020年4月20日現在公式の推奨版が12.16.2なのでこれをインストール

$ nodebrew install-binary v12.16.2

下記のようなエラーが出た場合.nodebrew/srcのディレクトリがないので作成する。

Fetching: https://nodejs.org/dist/v12.16.2/node-v12.16.2-darwin-x64.tar.gz
Warning: Failed to create the file 
Warning: /Users/（ユーザー名）/.nodebrew/src/v12.16.2/node-v12.16.2-darwin-x64.tar.g
Warning: z: No such file or directory
$ mkdir -p ~/.nodebrew/src

再度インストール

$ nodebrew install-binary v12.16.2

下記を実行してインストールされているかどうか確認

$ nodebrew ls
v12.16.2

current: none

インストールはされているがcurrent:noneとなっており有効にはなっていないので有効化する

$ nodebrew use v12.16.2
use v12.16.2

PATH通し

下記コマンドを使いNode.jsを使えるようにパスを通す

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

設定したパスを反映

$ source ~/.bash_profile

最後にNode.jsが使用できるかどうか確認

$ node -v
v12.16.2

Vue CLIのインストール

まずVue CLIがインストールされていないか一応確認

$ vue --version
bash: vue: command not found

下記を実行してインストール

$ npm install -g @vue/cli@3.9.3

インストール後バージョン確認

$ vue --version
3.9.3

以上