前のパートに戻る 完了して次のパートへ  

  1-1 Vue CLI のインストール

Vue CLI とは


Vue.js でアプリケーションを開発するにあたって初期環境の構築は手動でやるととても大変です。それを自動で行ってくれるのが Vue CLI です。今回のパートではその Vue CLI をインストールします。

npm の確認


npm とは Node Package Manager の略で JavaScript で使用するライブラリを管理してくれるツールです。Node.js をインストールしたら同時にインストールされます。ターミナルで下記のコマンドを実行してみてください。

$ npm -v
6.9.0

このようにバージョン情報が表示されれば大丈夫です。もし表示されなかった場合は 0 章の「開発環境(Mac)」もしくは「Cloud9 を利用する手順」を参照して設定を行ってください。(ただし 6.9.0 は筆者が執筆時のバージョンです。活発に更新されていますのでもっと新しいバージョンが表示されることもあります。)

Vue CLI のインストール(Mac)


※ Cloud9 をお使いの方はここを飛ばして次の「Vue CLI のインストール(Cloud9)」を参照してください。

Vue CLI をインストールするにはターミナルで下記のコマンドを実行してみてください。

$ npm install -g @vue/cli

エラーが出なければインストールは成功しているのですがこのままでは vue コマンドは使用できません。まず下記のコマンドを実行してください。

$ nodenv rehash

これで vue コマンドが使用できるようになっています。ターミナルで下記のコマンドを実行してみてください。

$ vue --version
3.9.2

このようにバージョン情報が表示されれば成功です。こちらもバージョンが異なる可能性はあります。

Vue CLI のインストール(Cloud9)


※ Mac をお使いの方は前の「Vue CLI のインストール(Mac)」を参照してください。

Vue CLI をインストールするにはターミナルで下記のコマンドを実行してみてください。

まず Cloud9 のターミナルは下記の部分です。

狭いようでしたら下記のように広げることができます。

Vue CLI をインストールするにはターミナルで下記のコマンドを実行してみてください。

$ npm install -g @vue/cli

エラーが出なければvue コマンドが使用できるようになっています。ターミナルで下記のコマンドを実行してみてください。

$ vue --version
3.9.2

本パートで学んだこと


本パートでは以下のことを新たに学習しました。最後の確認にお使いください。

  • Vue CLI のインストール方法

以上で今回のパートは終了です。

お疲れ様でした。

議論

0 質問

このコースの評価は?