1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Mac で Vue CLI をインストールする方法

Posted at

エンジニア1ヶ月目の初心者です。
備忘録として書きます。

目次

  1. homebrewをインストール
  2. homebrewを使ってnodebrewをインストール
  3. nodebrewを使ってNode.jsをインストール
  4. Vue CLIをインストール

ちなみに以下の記事を参考にしました。

【MacにNode.jsをインストール】
https://qiita.com/kyosuke5_20/items/c5f68fc9d89b84c0df09
【VueCLIをインストール! ❏Vue.js❏】
https://qiita.com/ITmanbow/items/9ea7d3f5a9219d760d0c

1. homebrewをインストール

http://brew.sh/index_ja.html にあるスクリプトを実行する。

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

インストール後は以下コマンドでHomebrewのバージョンが確認可能。

$ brew -v

結果👇

Homebrew 2.2.14
Homebrew/homebrew-core N/A

2. nodebrewをインストール

Homebrewを使用してインストールします。

$ brew install nodebrew

僕はこれがうまくいかず……

👇こんなカンンジのエラーが出ました……

Updating Homebrew...
==> Tapping homebrew/core
Cloning into '/usr/local/Homebrew/Library/Taps/homebrew/homebrew-core'...
remote: Enumerating objects: 44, done.
remote: Counting objects: 100% (44/44), done.
remote: Compressing objects: 100% (32/32), done.
error: RPC failed; curl 56 LibreSSL SSL_read: SSL_ERROR_SYSCALL, errno 54
fatal: the remote end hung up unexpectedly
fatal: early EOF
fatal: index-pack failed
Error: Failure while executing; `git clone https://github.com/Homebrew/homebrew-core /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core` exited with 128.
Error: Failure while executing; `/usr/local/bin/brew tap homebrew/core` exited with 1.

ただ、以下のコードを打ってみたんです。

% BREW DOCTOR

そしてその後に、もう一回……

$ brew install nodebrew

をやったら、なんか知らんけどイケました。

うまくいかない時は
https://dkssksk.com/machomebrew/
に書いてることを試してみてもいいかも……!

インストール後は以下コマンドでnodebrewのバージョンが確認可能。

$ nodebrew -v

3. nodebrewを使ってNode.jsをインストール

nodebrewを使ってNode.jsをインストールできます。

最新版を取得する際は

$ nodebrew install-binary latest

安定版を取得する際は

$ nodebrew install-binary stable

……って感じで書きます。

ここでボクは最新版を取得するため以下のコードを書きました。

$ nodebrew install-binary latest

ですが、👇こんなエラーが出ました。


Fetching: https://nodejs.org/dist/v14.1.0/node-v14.1.0-darwin-x64.tar.gz
Warning: Failed to create the file                                                                                                                                                                       
Warning: /Users/*****/.nodebrew/src/v14.1.0/node-v14.1.0-darwin-x64.tar.gz
Warning: : No such file or directory

curl: (23) Failed writing body (0 != 978)
download failed: https://nodejs.org/dist/v14.1.0/node-v14.1.0-darwin-x64.tar.gz

👇のように書いてるから、ファイル(ディレクトリ)がないのが原因っぽいね。

Warning: : No such file or directory

てことでよくわからんけどディレクトリを作成。

$ mkdir -p ~/.nodebrew/src

▲これをそのまんま書けばええよ。
https://eng-entrance.com/linux-command-mkdir
を見る感じ、-pってのをつけるといい感じにディレクトリが作れるっぽいです。
細かいことがわかリマセン。

もう一回以下のコードを記入。

$ nodebrew install-binary latest

ほんでインストールされたnodeを有効化します。

$ nodebrew ls

上記、コマンドでインストールされたバージョンが見れます。

v14.1.0

current: none

インストール直後はcurrent: noneとなっているため、必要なバージョンを有効化します。

nodeが使えるように環境パスを通します。

環境パスってなんなのでしょうか?
「ファイルの場所」みたいな理解でいいのかな?

macOS X 10.15 Catalinaからは環境パスはzshがデフォルトになったので以下のように書きます。

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

zshとは?って方は以下をチェック。
【zshとは?】
https://wa3.i-3-i.info/word11788.html

もし環境パスがbashの場合は以下を参考。
https://qiita.com/kyosuke5_20/items/c5f68fc9d89b84c0df09

$ nodebrew use v14.1.0

もう一度nodebrew lsを試します。

v14.1.0

v14.1.0が設定されました。

よーし、あと1歩!!

4. Vue CLIをインストール

あとはこちらをどうぞ!
【VueCLIをインストール! ❏Vue.js❏】
https://qiita.com/ITmanbow/items/9ea7d3f5a9219d760d0c

1
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?