Vue.js 環境構築時エラーの対処法 (npm install -g vue-cli)

#はじめに

Vue.jsの環境構築をターミナルで実施した際に発生したエラーの対処法についてまとめた記事です。
環境構築時にnpmコマンド実施してvue-cli のパッケージをインストールする(以下コマンド参照)

npm install -g vue-cli

上のやり方をいろんな記事で紹介しているのですが、それがうまくいかなかった時の対処方法についてまとめました。

#エラー文

$ npm install -g vue-cli
npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules
npm ERR! path /usr/local/lib/node_modules
npm ERR! code EACCES
npm ERR! errno -13
npm ERR! syscall access
npm ERR! Error: EACCES: permission denied, access '/usr/local/lib/node_modules'
npm ERR!  { [Error: EACCES: permission denied, access '/usr/local/lib/node_modules']
npm ERR!   stack:
npm ERR!    "Error: EACCES: permission denied, access '/usr/local/lib/node_modules'",
npm ERR!   errno: -13,
npm ERR!   code: 'EACCES',
npm ERR!   syscall: 'access',
npm ERR!   path: '/usr/local/lib/node_modules' }
npm ERR! 
npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR! 
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator (though this is not recommended).

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/fisherman0825/.npm/_logs/2019-01-29T14_00_50_007Z-debug.log

#原因

エラーの内容を見た感じ、permission deniedとなっているのでnpmコマンドを実施する上での権限が足りていないのが原因。

#実施したこと

###①npmのディレクトリパスの確認
npmがどこのディレクトリを使っているのかを確認します。

$ npm config get prefix
/usr/local

###②パーミッション変更

$ sudo chown -R $(whoami) $(npm config get prefix) / {lib/node_modules,bin,share}

ここでパスワードが求められるのでパスワード入れたら色々npmや他のディレクトリのパーミッションを有効にしていくのでしばらく待ちます。

#再確認

$ npm install -g vue-cli
npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
/usr/local/bin/vue -> /usr/local/lib/node_modules/vue-cli/bin/vue
/usr/local/bin/vue-list -> /usr/local/lib/node_modules/vue-cli/bin/vue-list
/usr/local/bin/vue-init -> /usr/local/lib/node_modules/vue-cli/bin/vue-init
+ vue-cli@2.9.6
added 239 packages from 206 contributors in 22.001s

無事エラーが出ず、vue-cliのパッケージのインストールができました。

$ vue --version
2.9.6

最後にちゃんとvueコマンドが使えるかどうかバージョンの確認も行いました。

##参考サイト
[npmでパッケージをインストールする]
(https://www.storange.jp/2017/02/npm.html)
npmでpermission deniedになった時の対処法[mac]