vue -Vでzsh: command not found: vue からバージョンがちゃんと確認できるまでの苦悩

　背景

この記事はvueのcliを入れたものの、vueのコマンドが使えなくて調べた内容を記録しておくための備忘録となっています。

順を追っていきましょう。

流れ

まず、vueのcliを使用するために以下のコマンドを実施

＜実行コマンド＞

npm install -g @vue/cli

その後、手順に沿ってvueのコマンドが使用できるか確認

＜実行コマンド＞

vue -V

zsh: command not found: vue

なんでや！！！！！

言われた通りにやってますやん！まあ、こんなことは開発環境設定においてはあるある。
西川くんとこの子が毎回気絶しちゃうくらいあるある。

そんな戯言は置いておいて、調べてみると、PATHが通ってないと。
ふむふむ
よく聞くやつですね。
調べてみると、色々と出てくるんですね。そんな中、.bash_profileなるものにPATHの設定をしていないからvueのコマンドが使用できない！みたいな記事を見つけたんです。
でも、考えてみると、わたし、bashじゃないんですよね。
とはいえ、その記事だと、.bash_profileに記述してやればできたっていうので、真似してやってみることに。

terminal

export PATH="/Users/＊＊＊/.npm-global/lib/node_modules/vue-cli/bin:$PATH"

$ source ~/.bash_profile

まず❗️.bash_profileがないので、(色々と省きますが)できませんでした。

(少し寄り道)

そこで一旦、確認する。vueはあるんか。この記事通りで確認するとvue自体は確認できました

＜実行コマンド＞

terminal

npm list -g vue
/Users/[name]/.npm-global/lib
└── vue@2.6.12 

本筋へ戻ります

調べた結果、自分はzshに設定がなっているのでzshに基づいたpathの設定をしないといけないみたいなんですね。
ふむふむ。
とすると、「.zshrc vue」で調べてみるか、ということに。
なかなか良さそうな記事があったのでそれを真似してみる事に。

.zshrc

export PATH=$PATH:/Users/[username]/.npm-global/bin

上記一文を.zshrcの最後の1行に追記してみました。
([username]のところを自分の登録されている名前に変更してください)
そして、ファイルを編集した後は下記コマンドで設定の際読み込みを実施。(これ忘れないでください)

＜実行コマンド＞

terminal

source .zshrc      

そしてついに,,,

そしてもう一度、vueのコマンドが使えるかバージョンの確認からテストです。

terminal

vue -V
@vue/cli 4.5.13

ついに通りました！歓喜です!!

ついこの間までなら自分一人で解決って難しかったと思うんですけど、ちょっとずつ経験値を積んできて、『多分こういうパターンだろうから、pathをこうしてこうやったら,,,』みたいなのができる様になったのかなと思います。

皆様の中にも、自分はbashじゃないんだけど(自分も気づいたらzshだったんです。怖いですねw)、どうやって解決すればいいんだ？？みたいな方が少なからずいらっしゃると思います。そんな方の解決のヒントになれば幸いです。

参考記事はこちらです:
How to fix “zsh: command not found: vue”?