npm の導入から Vue-cli 環境構築

Vue-Cli の環境構築

チャット系のアプリケーションを作りたいなと思い、Vue.js + element でフロント側を作りたいとなったので、npmの導入からVue.jsとVue-cliの導入を書きます。
いつも、npmの導入で手こずるので一回それもまとめときたいなと思い記事にしました。

前提

mac OS high Sierra
brew 導入済み

導入

nodebrewの設定

shell

brew install nodebrew # nodebrew のインストール

nodebrew -v # nodebrew のバージョン確認

mkdir -p .nodebrew/src/ # nodebrew install でエラーになるためあらかじめ ~/.nodebrew/src を作っておく

nodebrew install-binary latest # 最新のバイナリをインストール

nodebrew list # nodebrewの一覧を表示

nodebrew use v11.12.0 # 使用するバージョンを選択 (nodebrew listで見たときに表示されるバージョンを選択)

echo 'export PATH=$PATH:$HOME/.nodebrew/current/bin' >> ~/.bash_profile # インストールしたバイナリにパスを通す

vi ~/.bashrcで設定ファイルを開く

shell

if [ -f ~/.bashrc ] ; then
. ~/.bashrc
fi

を追記

exec $SHELL -lでターミナルを再起動

Vue-cliの導入

npm install -g vue-cli

vue init webpack test

でプロジェクトの作成がうまくいきました。

まとめ

基本的にnode/npmの手順にすごく手間取る感じでした。

npm -vで

dyld: Library not loaded: /usr/local/opt/icu4c/lib/libicui18n.60.dylib
  Referenced from: /usr/local/bin/node
  Reason: image not found
Abort trap: 6

というエラーがでてて悩んでましたけどbrew reinstall nodeで解決しました。