LoginSignup
1

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-03-10

概要

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のバージョンが古い。3以上じゃないとダメらしい。

@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$の記述が足りなかった
スクリーンショット 2020-03-10 20.29.02.png
追加した "export PATH=~/.nodebrew/current/lib/node_modules/@vue/cli/bin" の末尾に":PATH$"の記述が足りなかった・・・
そのため、追加パスがPATHに代入される以前に代入されていたパスたちが、追加パスで上書きされてしまっていた。
スクリーンショット 2020-03-10 20.29.16.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も使えるようになった。
環境変数について理解するいい機会になった。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1