Vue CLIのパッケージマネージャーがnpmからyarnに変わっていて苦労した


こんにちは、てりーです。

昨日、Vue CLIで新しいプロジェクトを作ろうとしてたら、予想以上に苦労しました。
結論から言うとnpmからyarnにしとこうね!!って話だったんですが、
Vue CLI4でvue createが上手くいかない!!って人は参考になるかもしれないので、詳しくまとめておきます。

Vue CLIでプロジェクトを作る!!

まず、Vue CLIをインストール

npm install -g @vue/cli

続いてVue cli-service-globalのインストール

npm install -g @vue/cli-service-global

これで、Vue CLIを動かす準備OK!!
プロジェクトを作っていきます。

vue create hoge

すると、以下のエラー文が出てプロジェクトを作れません!!

Error: spawn yarn ENOENT

???

spawn yarn ENOENT的な物は見た事ないし、ググってみても日本語の文献が少なすぎて全く意味がわからない!!

Error: spawn yarn ENOENTはなぜ??

Vue CLIのインストールの段階で、Warningにcore.js3より前のものがVueCLIに含まれてるけど、良くないよー!!的なものはあったけど、これはVueCLI側がまだフォローできていない所っぽいので、今回は無視!!

nodeやnpmのバージョンを最新にupdateしてもエラーは消えないので、依存関係は原因ではなさそう。

yarnがなんか怪しそう!!

エラーコードにあったyarnを調べてみるとこんな記述が

Yarnはnpmに代わるパッケージマネージャーとして発表された後発のパッケージマネージャーで、npmが抱えていた多くの改善点を改善したパッケージマネージャーです。

yarn知らんかった!こんなものがあったのか。
Vue CLIの設定(~/.vuerc)を調べてみると、、、

{
  "useTaobaoRegistry": false,
  "packageManager": "yarn"
}

パッケージマネージャーのデフォルトがyarnに設定されていました!!
yarnじゃなくてnpmを使ってたからうまくいかなかったんですね。

デフォルトがyarnなので、本当はyarnをインストールして進めていくのが良いのですが、今回は設定をnpmに変えて進めていくことにしました。

 "useTaobaoRegistry": false,
  "packageManager": "npm"

で、もう一回vue create hogeしたら上手く行きました!!!

めでたしめでたし。

時間見つけてnpmからyarnに切り替えよう。