The problem that the version of Vue CLI did not go up

Overview

I stumbled upon a very rudimentary mistake when trying to upgrade the version of Vue CLI to run vue create, so make a note for those who have made similar mistakes.

I want to 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

The version of Vue CLI is old. It seems to be useless unless it is 3 or more.

Update (reinstall) @ vue / cli

As I was told Run "npm uninstall -g vue-cli" and "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 [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated [email protected]: 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
> [email protected] 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: [email protected] (node_modules/@vue/cli/node_modules/fsevents):
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] install: `node-gyp rebuild`
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: Exit status 1
+ @vue/[email protected]
updated 1 package in 35.557s

It seems that the version of Vue CLI has been upgraded!

Vue version check

nakano-hayatonoMacBook-Pro:~ hayato$ vue --version
2.9.6

It hasn't changed. ..

Recheck the log at the time of install

/Users/hayato/.nodebrew/current/bin/vue ->
/Users/hayato/.nodebrew/current/lib/node_modules/@vue/cli/bin/vue.js

It seems that the path where Vue is located has changed.

Add the path with the new Vue to the environment variable (.bash_profile)

Added "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/[email protected]/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

The version of Vue is up! But···

I can't use linux commands ...

nakanohatonoMBP:~ hayato$ ls
-bash: ls: command not found
nakanohatonoMBP:~ hayato$ which
-bash: which: command not found

Double check your .bash_profile

Check environment variables in Finder →: PATH $ was not enough The description of ": PATH $" was not enough at the end of the added "export PATH = ~ / .nodebrew / current / lib / node_modules / @ vue / cli / bin" ... Therefore, the paths that were assigned before the additional path was assigned to the PATH were overwritten by the additional path. Added ": PATH $" to the end of "export PATH = ~ / .nodebrew / current / lib / node_modules / @ vue / cli / bin".

The source command cannot be used → OK if you raise the terminal again

I can't use the source command because I can't use the linux command yet, and I panic because I can't reflect the environment variables.

nakano-hayatonoMacBook-Pro:vue_app hayato$ source ~/.bash_profile 
env: bash: No such file or directory

→ I was saved by telling my seniors that it will be reflected by restarting the terminal.

The linux command is restored safely. You can also use vue create. It was a good opportunity to understand environment variables.