Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
2
Help us understand the problem. What is going on with this article?
@terry_6518

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

More than 1 year has passed since last update.

こんにちは、てりーです。(Twitter:@teriteriteriri

昨日、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に切り替えよう。

参考:https://s8a.jp/vue-cli-use-npm

普段はブログの方で記事を書いているので、興味ある方はぜひ!
Blog:https://terrblog.com/

2
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
terry_6518
フリーランス2年目のフロントエンドエンジニアです。 現在はReact+TypeScriptの開発をメインで扱っています。 Vue.js、Angular、Reactのいずれも実務でメインで扱っていた時期があります。
engineerlife
技術力をベースに人生を謳歌する人たちのコミュニティです。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
2
Help us understand the problem. What is going on with this article?