Vue CLI 3をインストールしようとしたら「WARN deprecated」が出たので解決した話

Vue.js
スポンサーリンク

結論

既にvue cli v2をインストールした場合、一度アンインストールしないとvue cli v3はインストールすることができませんでした。

以下のコマンドでvue cli v2をアンインストールしてから、vue cli v3をインストールしましょう!

npm uninstall -g vue-cli
npm install -g @vue/cli

始めに

Vue CLIとは

Vue CLIとはVue.jsでシングルページアプリケーション(SPA)を開発するときに、すぐに始められるようにすでに準備されているモジュールのことです。

これをインストールするとすぐに開発に取り掛かることができます。

Vue.jsの公式サイトではこのように説明されています。

大規模なシングルページアプリケーション開発のための足場を素早く組むために、Vue.js では オフィシャル CLI を提供します。この CLI にはモダンなフロントエンドワークフローのための、すぐに使えるビルド設定を用意しています。

サイトはこちらです。

https://jp.vuejs.org/v2/guide/installation.html#CLI

Vue CLI v4について

2020/7/24にVue CLI v4.5.0がリリースされました。

このバージョンではVue 3のプロジェクトが作成できるようになりました。

バージョンによってnpmでVue CLIのインストールするコマンドが変更になりました。

バージョン2.0以前は

npm install -g vue-cli

だったのに対し、3,0以降は

npm install -g @vue/cli

こちらになりました。少し前の参考書で学習する場合は後者のコマンドになるので違いを覚えておきましょう。

そして、これが後々大切になってきます。

起こったこと

以前npmの知識がないまま参考書通りにVue CLIをインストールして環境を作りました。

今月(2020/12/27)になって改めてVue.jsの学習をするためにVue CLI v4.5.9をインストールしようとしたところこのような画面が出てしまいました。

みてみると「WARN deprecated」と言われています。

なんだこれはと思いながらググってみると全然情報がないではないですか!!

実際、解決しないまま3時間ぐらい悩んでました(笑)

原因を探す

ググっても一向に解決策が出てこないので、いったん自分で何かないかと思いいくつか原因について調べました。

ちなみにここではやったことなので、解決しません。

解決が見たい方は下の「解決方法」まで飛んでください。

  • nodeとnpmのバージョンが古い?
  • コマンドの-g(グローバルインストール)が怪しい?

ということで調べていきます。

nodeのとnpmのバージョンが古い?

まずはnode.jsの最新版をサイトからインストールします。

https://nodejs.org/ja/

インストールは全てデフォルトでインストールしました。

「npmも最新版にしよう!」ということでnpmをアンインストールして再度インストールしました。

npmを開きます。

npm uninstall
npm install

結果特に解決には至らずでした。

コマンドの-g(グローバルインストール)が怪しい?

さらに原因を調べていくとグローバルインストールはあまりお勧めしないという記事があったのでグローバルインストールをやめることにします。

npm install @vue/cli

結果、同じエラーではじかれます。

解決方法

上記の2パターンでダメだったので他に原因を考えました。

しかし、ただNode.jsをインストールしてコマンドを1つ打ち込むだけの作業のはずなのに何がダメなんだ、、、という結構どん詰まり状態でした。

ここで、以前Vue CLIを使ったときと今回のコマンドが少し違ったことを思い出しました。

調べてみたところ、少し上でもご説明しましたが、

npm install -g vue-cli

このコマンドはVue CLI v2.0以前をインストールする場合で、

npm install -g @vue/cli

こちらはVue CLI v2.0以降をインストールするという違いがありました。

さらに調べていくと、2.0以前のものをアンインストールしないとインストールできないという記事を見つけました。

ということで、解決方法はこちら!

npm uninstall -g vue-cli
npm install -g @vue/cli

古いものをアンインストールしてから新しいVue CLIをインストールします。

アンインストールがちゃんと実行されてそうな表示になりました。

インストールの方は最初は変わりませんでしたが、最終的にエラーにならずインストールが成功しました!

このまま、Vue.jsのプロジェクトを作成しましょう。

以下のコマンドを打ちます。

vue create プロジェクト名

そうするとプリセットを選択する画面が出るので、せっかくなので今回は上から2番目の「Default (Vue Preview)」を選択しましょう。

少し待つとこのような「Successfully created project」と出た画面になるので、そうしたら無事完了です。

ちなみにプロジェクトも作成されていることも確認しましょう。

ここでSuccessfully created project」と一緒に表示された以下のコマンドを入力することでサーバーを起動することができます。

cd sample
npm run serve

起動したらhttp://localhost:8080/を開くとデフォルトの画面が開くので、ちゃんと開いたら成功です。

ついでに今回出たこのエラーはこんな感じでした!

npm WARN deprecated @hapi/joi@15.1.1: Switch to 'npm install joi'
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142     
npm WARN deprecated @hapi/hoek@8.5.1: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/bourne@1.3.2: This version has been deprecated and is no longer supported or maintained       
npm WARN deprecated @hapi/topo@3.1.6: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/address@2.1.4: Moved to 'npm install @sideway/address'
npm WARN deprecated har-validator@5.1.5: this library is no longer supported

ここに出てくる@hapiはインストールしたプロジェクトのnode_modulesに含まれていたため、やっぱりバージョン関連のエラーっぽい気がしますね。

以上、ここまで読んでいただきありがとうございます。

スポンサーリンク
Vue.js
スポンサーリンク
この記事を書いた人
まさき

25歳の社会人3年目のシステムエンジニアです。
未経験からIT企業に入社して業務や、業務外でも学習することでプログラミングが書けるようになりました。
得意なのはHTML,CSS,JavaScript。最近はVue.jsとGASを勉強中です。
本を読むことが好きなのでIT技術書以外にもたくさん読みます。
好奇心旺盛でとりあえずやってみる精神です。
楽しいことが生きがいで、仕事も私生活も楽しくなるように日々奮闘中。

まさきをフォローする
シェアする
まさきのエンジニア図書館
タイトルとURLをコピーしました