LoginSignup
3
0

More than 3 years have passed since last update.

Vueはどこへ消えた?

Posted at

この物語は、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 CLIngコマンドなんかも同じ要領で解決できますよ。

3
0
0

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
3
0