Vue CLIのバージョンが上らず困った件

##概要
vue create を実行するために、Vue CLIのバージョンをあげようとしたらすごく初歩的なミスで躓いたので、同じようなミスをしてしまった人のためにメモしておきます。

##vue create したい
```
nakanohatonoMBP:~ hayato$ vue create vue-chatkit
  vue create is a Vue CLI 3 only command and you are using Vue CLI 2.9.6.
  You may want to run the following to upgrade to Vue CLI 3:
  npm uninstall -g vue-cli
  npm install -g @vue/cli
```
Vue CLIのバージョンが古い。３以上じゃないとダメらしい。

##@vue/cli の更新（再インストール）
言われた通り、
"npm uninstall -g vue-cli" と "npm install -g @vue/cli" を実行。

```
nakanohatonoMBP:~ hayato$ npm uninstall -g vue-cli
up to date in 0.062s
```
```
nakanohatonoMBP:~ hayato$ npm install -g @vue/cli
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated core-js@2.6.11: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
/Users/hayato/.nodebrew/current/bin/vue -> /Users/hayato/.nodebrew/current/lib/node_modules/@vue/cli/bin/vue.js
> fsevents@1.2.11 install /Users/hayato/.nodebrew/current/lib/node_modules/@vue/cli/node_modules/fsevents
> node-gyp rebuild
No receipt for 'com.apple.pkg.CLTools_Executables' found at '/'.
No receipt for 'com.apple.pkg.DeveloperToolsCLILeo' found at '/'.
No receipt for 'com.apple.pkg.DeveloperToolsCLI' found at '/'.
gyp: No Xcode or CLT version detected!
gyp ERR! configure error 
gyp ERR! stack Error: `gyp` failed with exit code: 1
gyp ERR! stack    at ChildProcess.onCpExit (/Users/hayato/.nodebrew/node/v13.3.0/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:351:16)
gyp ERR! stack    at ChildProcess.emit (events.js:219:5)
gyp ERR! stack    at Process.ChildProcess._handle.onexit (internal/child_process.js:274:12)
gyp ERR! System Darwin 19.0.0
gyp ERR! command "/Users/hayato/.nodebrew/node/v13.3.0/bin/node" "/Users/hayato/.nodebrew/node/v13.3.0/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /Users/hayato/.nodebrew/node/v13.3.0/lib/node_modules/@vue/cli/node_modules/fsevents
gyp ERR! node -v v13.3.0
gyp ERR! node-gyp -v v5.0.7
gyp ERR! not ok 
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 (node_modules/@vue/cli/node_modules/fsevents):
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 install: `node-gyp rebuild`
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: Exit status 1
+ @vue/cli@4.2.3
updated 1 package in 35.557s
```
Vue CLIのバージョンが上がったっぽい！

##Vueのバージョン確認
```
nakano-hayatonoMacBook-Pro:~ hayato$ vue --version
2.9.6
```
変わってない。。

##install時のログを再確認してみる
```
/Users/hayato/.nodebrew/current/bin/vue ->
/Users/hayato/.nodebrew/current/lib/node_modules/@vue/cli/bin/vue.js
```
Vueのいるパスが変わってるっぽい。

##環境変数（.bash_profile）に新しいVueのいるパスを追加
"export PATH=~/.nodebrew/current/lib/node_modules/@vue/cli/bin" を追加。

```
nakanohatonoMBP:~ hayato$ vi .bash_profile 
nakanohatonoMBP:~ hayato$ cat .bash_profile 
export PATH=~/.rbenv/shims:/usr/local/bin:$PATH
eval "$(rbenv init -)"
export PATH=/usr/local/opt/mysql@5.6/bin:$PATH
 export PATH=~/.nodebrew/current/lib/node_modules/@vue/cli/bin
 export PATH=$HOME/.nodebrew/current/bin:$PATH
 export PATH=~/.nodebrew/current/bin:$PATH
 export PATH=$HOME/.pyenv/shims:$PATH
nakanohatonoMBP:~ hayato$ source .bash_profile
```
```
nakano-hayatonoMacBook-Pro:~ hayato$ vue --version
@vue/cli 4.2.3
```
Vueのバージョンが上がった！が・・・

##linuxコマンドが使えなくなる・・・
```
nakanohatonoMBP:~ hayato$ ls
-bash: ls: command not found
nakanohatonoMBP:~ hayato$ which
-bash: which: command not found
```
##.bash_profileを再確認してみる
Finderで環境変数を確認　→　：PATH＄の記述が足りなかった
<img width="500" alt="スクリーンショット 2020-03-10 20.29.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281645/f1b11ff4-cb21-0492-5575-007aac5628d7.png">
追加した "export PATH=~/.nodebrew/current/lib/node_modules/@vue/cli/bin" の末尾に"：PATH＄"の記述が足りなかった・・・
そのため、追加パスがPATHに代入される以前に代入されていたパスたちが、追加パスで上書きされてしまっていた。
<img width="533" alt="スクリーンショット 2020-03-10 20.29.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281645/b98147a6-232b-8b4f-ce61-e3a451e253f1.png">
"export PATH=~/.nodebrew/current/lib/node_modules/@vue/cli/bin" の末尾に"：PATH＄"の記述を追加。

##sourceコマンドが使えない　→　ターミナルをあげなおせばOK
まだlinuxコマンドが使える状態じゃないのでsourceコマンドが使えず、環境変数の反映ができずにパニック。

```
nakano-hayatonoMacBook-Pro:vue_app hayato$ source ~/.bash_profile 
env: bash: No such file or directory
```
→先輩にターミナルの再起動で反映されることを教えてもらい救われる。

無事にlinuxコマンド復活。
vue createも使えるようになった。
環境変数について理解するいい機会になった。