この物語は、Vue CLIに興味を持ち、Yarnを使ってインストールしてみたものの、パスを見失ってしまった哀れな開発者の奮闘の記録です。
第1話 WindowsにYarnでVue CLIをインストールする
事件編
まずはWindowsにNode.jsとYarnをインストールします。使うのは、Windows用のパッケージマネージャChocolatey。
choco install nodejs
choco install yarn
で、Vue CLIの記述の通り、YarnでVue CLIをインストール。
yarn global add @vue/cli
ちゃんとインストールできたかか確認すると……
vue --version
……こんな無慈悲なメッセージが。
'vue' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。
Vueはどこへ消えた?
解決編
Yarnでグローバルインストールしたパッケージは、C:\Users\me\AppData\Local\Yarn\bin
に隠れています。
なので、このパス(%AppData%\Local\Yarn\bin
でも可)を手動で環境変数に追加すれば、パスが通ります。
めでたしめでたし。
第2話 ChromebookにYarnでVue CLIをインストールする
事件編
次は、Chromebook(上のLinux)にもVue CLIをインストールしてみます。
Node.js 公式のバイナリディストリビューションを参考にNode.jsと、
curl -sL https://deb.nodesource.com/setup_13.x | sudo -E bash -
sudo apt-get install -y nodejs
Yarn公式サイトを参考にYarnをインストールします。
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt-get update && sudo apt-get install yarn
で、さっきと同じようにYarnでVue CLIをインストールし、確認すると……
……こんな無慈悲なメッセージが。
-bash: vue: command not found
Vueはどこへ消えた?
解決編
Yarnでグローバルインストールしたパッケージは、「Linux ファイル」からアクセスできるホームフォルダ内の.yarn/bin
に存在します。
同じディレクトリにある.profileファイルをテキストエディタとかで開き、
if [ -d "$HOME/.yarn/bin" ] ; then
PATH="$HOME/.yarn/bin:$PATH"
fi
と末尾に追記して、ターミナルを再起動すると、無事パスが通ります。
めでたしめでたし。
ちなみに、Angular CLIのng
コマンドなんかも同じ要領で解決できますよ。