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/
上記へアクセス。
無事ローカルホストにアクセスできた。