はじめに
Vue CLIをアップデートする方法をご説明します。
Vue CLIは頻繁にアップデートされており、アップデートするたびに方法を調べているため備忘録的にコンテンツとして残します。
バージョンを確認する
バージョンによってアップデートの方法が異なるため、はじめに現在導入されているVue CLIのバージョンを確認しましょう。
バージョン確認
- ターミナル/コマンドプロンプトを開いて「vue --version」コマンドを実行してください
$ vue --version
- 以下のように現在インストールされているバージョンが出力されます
- この場合、メジャーバージョン３・マイナーバージョン２・リビジョン２となります
@vue/cli 3.2.2
メジャーバージョン２以下がインストールされている場合のアップデート方法
Vue CLIは、メジャーバージョン２までとメジャーバージョン３以降でNPMパッケージが変更されています。
そのため、メジャーバージョン２以下からメジャーバージョン３以降にバージョンアップする場合は、古いVue CLIを一度アンインストールしてから、新しいバージョンをインストールする必要があります。
古いVue CLIをアンインストールする
- NPMを使ってVue CLIをインストールしている場合は、以下のコマンドを実行してください
$ npm uninstall -g vue-cli
- YARNを使ってVue CLIをインストールしている場合は、以下のコマンドを実行してください
$ yarn global remove vue-cli
新しいVue CLIをインストールする
- NPMを使ってVue CLIをインストールする場合は、以下のコマンドを実行してください
$ npm install -g @vue/cli
- YARNを使ってVue CLIをインストールする場合は、以下のコマンドを実行してください
$ yarn global add @vue/cli
メジャーバージョン３以降がインストールされている場合のアップデート方法
npmのinstallコマンドを再度実行することでVue CLIのアップデートが可能です。
Vue CLI のアップデート
- NPMを使ってVue CLIをインストールしている場合は、以下のコマンドを実行してください
$ npm install -g @vue/cli
- YARNを使ってVue CLIをインストールしている場合は、以下のコマンドを実行してください
$ yarn global add @vue/cli
アップデート後のバージョンを確認する
再度、ターミナル/コマンドプロンプト上でコマンドを実行し、アップデート後のバージョンを確認します
バージョン確認
- ターミナル/コマンドプロンプトを開いて「vue --version」コマンドを実行してください
$ vue --version
- バージョンが更新されていることを確認してください
@vue/cli 4.5.13
さいごに
以上で、Vue CLIのアップデートは完了となります。
現在インストールされているバージョンによって手順が変わることを注意してください。