Vue.js勉強のために Vue CLI をインストールする。

Vue CLIは、Vue.js のアプリケーションの開発を支援してくれるツールで、ページ間の遷移を定義したりするために必要となってくる。
Vue CLI のインストールには npm というコマンドを使用するが、これは JavaScript のパッケージ管理ツールとなっている。
Javascript の実行環境である Node.js をインストールすると npm も勝手にインストールされるため、まずは Node.js のインストールからしていく。

参考にした記事

Vue.jsの環境構築 (mac)

MacにNode.jsをインストール

Node.js をインストール

前提としてHomebrewをインストールしている。

ターミナル

# nodebrewはNode.jsのバージョン管理ツール
$ brew install nodebrew  

# install時エラーが出ることがあるためディレクトリの作成をしておくといいらしい
$ mkdir -p ~/.nodebrew/src 

$ nodebrew install-binary v8.9.4 #8.9.0以上のバージョンじゃないと動かない。

インストールができたら確認。

ターミナル

$ nodebrew ls

# インストール直後はバージョンが有効化されてないため current: none と表示されるはず

v8.9.4

current: none

以下のコマンドでバージョン有効化

ターミナル

$ nodebrew use v8.9.4 

# 再度
$ nodebrew ls 

# 結果
v8.9.4

current:v8.9.4

パスを通す

ターミナル

$ nodebrew setup

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

$ source ~/.zshrc

パスの確認

ターミナル

$ node -v
v8.9.4


$ npm -v
5.6.0

上記の表示が出れば Node.js のインストールは完了。
シェルは zsh 前提でやっているため、 bash の場合は参考記事のリンクがあるためそちらで。

Vue CLI のインストール

ターミナル

$ npm install -g @vue/cli


$ vue --version
@vue/cli 4.5.3

Vue CLI のインストールが完了。

$ vue create プロジェクト名 プロジェクト作成。

$ npm run serve ローカルホスト起動。

$ vue ui プロジェクト管理ツール起動。

試しにプロジェクトを作成してみる。

ターミナル

npm ERR! code EUNSUPPORTEDPROTOCOL
npm ERR! Unsupported URL Type "npm:": npm:vue-loader@^16.0.0-beta.3

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/nakayamakeiichi/.npm/_logs/2020-08-16T07_32_59_551Z-debug.log
 ERROR  command failed: npm install --loglevel error

エラーが出る。
キャッシュを消すといけたという記事を見つけたため。

ターミナル

$ npm cache clean --force         # キャッシュを消すコマンド

再度プロジェクト作成。

ERROR  command failed: npm install --loglevel error

npm のバージョンが古いのか？と思いnpmバージョンアップ

ターミナル

$ npm install -g npm  

$ npm -v
6.14.7  #5.6.0からバージョンアップ

もう一度プロジェクトを作成する。

ターミナル

⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project test-cli.
👉  Get started with the following commands:

上手く作成できた。

＊原因の推測＊
1: npmのバージョンの問題だった可能性。
2: キャッシュを消した後、途中まで作成されていたプロジェクトを削除しなかった。
3: もしくは、どちらも原因。

ちょっともやもやするので、また調べてみることにする。

最後に作成したプロジェクトをローカルホストで立ち上げる。

ターミナル

$ cd test-cli

$ npm run serve

> test-cli@0.1.0 serve /Users/nakayamakeiichi/projects/test-cli
> vue-cli-service serve

 INFO  Starting development server...
98% after emitting CopyPlugin

 DONE  Compiled successfully in 1787ms                                  17:12:38


  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://192.168.0.6:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

http://localhost:8080/
上記へアクセス。

> 無事ローカルホストにアクセスできた。

途中上手くいかないことがあったが、なんとか環境構築ができた。