0-5

VueCLIのインストール

VueCLIとは

VueCLI(Vue Command Line Interface)とは、その名の通りコマンドラインを使ってVue.jsでの開発支援を行うツールのことを指します。

開発を始めるにあたって初めに遭遇するのが環境構築のハードルの高さですが、このVueCLIを使うと、コマンドライン上で選択肢を選んでいくだけでプロジェクトの作成がお手軽に完了します。

実際のプロジェクト作成は次章で詳しく説明しますが、本パートではVueCLIのインストール方法について解説していきます。

本教材ではVueCLIのバージョン4.5.13を前提として説明を行います。

前パートでインストールしたNode.jsに同梱されているnpmコマンドを利用してインストールを行います。
下記コマンドを実行してVueCLIのバージョン4.5.13をインストールしましょう。

console
 
Copied!
$ sudo npm install -g @vue/cli@4.5.13

コマンド先頭にあるsudoとは「管理者権限として実行」という意味合いを持ち、通常ユーザだとアクセスに制限がかけられたファイルでも読み書きすることが可能になります。

今回のVueCLIのインストールでは、お手元の環境によっては通常ユーザではアクセスできないディレクトリに変更を加える必要があるため、sudoをつけています。

ただし、実行の際には

が必要となるのでご注意ください。

もしもうまく実行できない場合には先頭のsudoを除いた下記コマンドでお試しください。

console
 
Copied!
$ npm install -g @vue/cli@4.5.13

パスワードを確認されるメッセージが表示された場合、PCのログインパスワードを入力してエンターを押すとインストールが開始します。なお、ここでは入力した内容は画面上には表示されないのでご注意ください。

console
 
Copied!
Password:   # ← パスワードを入力してエンター、入力中の文字は見えない。

インストールが完了するまで時間がかかりますが、画面上に流れる進捗表示が止まるまで待ちましょう。

進捗表示が止まり、下記のようなメッセージが表示されればインストールは終了です。


Copied!
+ @vue/cli@4.5.13
added 934 packages from 588 contributors in 61.923s

最後に以下のようなバージョン確認コマンドを実行し、VueCLIがインストールされているかどうかを確認してみましょう。

console
 
Copied!
$ vue --version

下記のようにバージョン番号4.5.13が表示されていれば無事インストールは完了です。

console
 
Copied!
@vue/cli 4.5.13