Vue.jsの開発支援ツール【Vue CLI】を導入してみた

#概要
最近人気であるJavaScriptフレームワーク「Vue.js」を試してみようと思い、Vue.jsアプリケーションの開発支援ツールである「Vue CLI」の開発環境の構築を行いましたのでその手順を記載しました。

- 開発環境「Vue CLI」の導入手順
 - Node.jsのインストール
 - Vue CLIのインストール
 - Vue CLIの基本的な使い方
 - ホットリロード機能の確認
- 導入環境
 - Windows10 Home 64bit バージョン1903

#開発環境「Vue CLI」の導入手順
Vue CLIのインストールはWindowsのコマンドプロンプトやMacのターミナルなどのようなコマンドラインツールを使用して、npmコマンドを入力実行して行っていきます。
npmは、JavaScript用のパッケージ管理ツールですが、npmがインストールされていなくとも、JavaScriptの実行環境であるNode.jsをインストールすると、一緒にnpmもインストールされるので、「Node.js」をインストール後、「Vue CLI」をインストールする順番で導入していきます。

##Node.jsのインストール
公式サイトから該当するプラットフォームのインストーラをダウンロードします。
https://nodejs.org/ja/download/
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/652173/d5539048-e17c-26e0-5607-927ce2368ef7.png" width=75%>
ここでは導入先環境がWindowsの64bitマシンなので、msiインストーラをダウンロードしますが、自分の環境に合ったインストーラをダウンロードします。

Windowsの場合は簡単で、ダウンロードしたインストーラを実行後、画面の指示に従ってインストールを進めていきます。

「Next」をクリックします
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/652173/b30b0d5d-cece-85ca-4be4-d46512106665.png" width=50%>
ライセンス同意のチェックをつけて「Next」をクリックします
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/652173/546ee559-de53-834e-0f2a-5795d5b1e218.png" width=50%>
インストール先を指定します。（ここではデフォルトのままにしています。）
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/652173/5a32e091-7c9d-81e9-1f0d-04490e984d93.png" width=50%>
インストール内容を選択します。（ここではデフォルトのままにしています。）
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/652173/09a00247-91b5-393a-2b58-ad0626833e0b.png" width=50%>
ツールをインストールするか選択します（ここではインストールしません。）
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/652173/8f803476-691d-d7f5-7876-18015bea7f0d.png" width=50%>
インストール開始画面で「install」をクリックすると、Node.jsのインストールが開始されます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/652173/b081aeb7-88db-6d1e-ccab-c9f091dc8a36.png" width=50%>
インストールが終了すると完了画面が表示されるので、「Finish」をクリックしてインストーラを閉じます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/652173/f5c29cfb-2d3a-1aba-c970-47d79780215c.png" width=50%>

Node.jsをインストールするとnpmも一緒にインストールされるので、正常にインストールできたかどうか確認します。コマンドラインから次のnpmコマンドを実行します。正常にインストールされていれば「6.14.8」(2020年11月時点)のようにnpmのバージョンが表示されます。

```bash
npm --version
```


Node.jsのバージョンも確認しておきます。コマンドラインから次のnodeコマンドを実行します。正常にインストールされていれば「v14.15.0」(2020年11月時点)のようにnpmのバージョンが表示されます。

```bash
node --version
```


##Vue CLIのインストール
Vue CLIのインストールは、コマンドラインから次のnpmコマンドを実行します。
少し時間がかかるので、インストール状況の表示が更新されるのを待ちます。

```bash
npm install -g @vue/cli
```
進行状況
![vuecliインストール.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/652173/091f50f1-5d1a-6bd5-feaf-55a9839c568a.png)

正常にインストールできたか確認するために、コマンドラインから次のvueコマンドを実行します。正常にインストールされていれば「4.5.8」(2020年11月時点)のようにVue CLIのバージョンが表示されます。これで、Vue CLIのインストールは完了です。

```bash
vue --version
```

##Vue CLIの基本的な使い方
Vue CLIにはGUIのプロジェクト管理ツールが用意されていて、ツールの画面からプロジェクトの作成やソースコードのビルドを実行できます。VueCLIではアプリケーションの管理単位をプロジェクトと呼んでいます。プロジェクト管理ツールを起動するには、コマンドラインから次のvueコマンドを実行します。

```bash
vue ui
```

起動に成功すると次のような初期画面がブラウザで表示されます。
![Vue初期画面.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/652173/6eb9accd-7fef-a088-b6d9-093b05ea6671.png)

###新しいプロジェクトを作成する
「ここに新しいプロジェクトを作成する」をクリックして、プロジェクトの作成場所を指定します。保存場所を指定したら「次へ」でプリセットの設定画面に進みます。
![Vueプロジェクト作成1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/652173/58d4e54e-431e-fa2c-0720-bd75e1c9b868.png)
![Vueプロジェクト作成2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/652173/435f6af9-4846-e9f6-bbcd-9c91eadb8ca7.png)
ここでは、最初のデフォルトのプリセット「babel, eslint」を選択します。
![Vueプロジェクト作成3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/652173/709f2a56-1e80-ddfe-697d-ed3a3a0f8106.png)
「プロジェクトを作成する」をクリックすると、選択したプリセットに応じたプラグインのインストールが始まるので、プロジェクトの作成が完了するまで待ちます。
![Vueプロジェクト作成4.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/652173/495c047b-4b77-a4a5-4715-84ad890987d3.png)
プロジェクトの作成が完了すると、プロジェクトの管理画面が表示されます。プロジェクトフォルダを確認してみると、プロジェクトのサンプルソースコードが自動的に配置されています。
![Vueプロジェクト管理画面.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/652173/9e8c95bf-f0d3-368e-8b3b-d51358c4086f.png)
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/652173/3976198f-333c-3dba-1e75-8e95909917fe.png" width=50%>

###開発環境(ローカル環境)向けのビルド
プロジェクト管理画面の左メニューにある「タスク」を選択します。タスクの一覧から「serve」を選択して「タスクの実行」をクリックします。
![開発ビルド.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/652173/66c1ed13-8b66-f7b5-b67b-69c42cf309da.png)
この操作によって、ローカルサーバー上でアプリケーションが実行できるようにコンパイルを行います。出力タブに切り替えて見るとコマンドラインから実行できるコマンドを実行しているだけでした。

コンソールに出力されている最後のメッセージを確認すると今の状況を教えてくれていました。
1. [http://localhost:8080/] でアプリケーションが起動してます。
2. 開発環境向けビルドは最適化されていないことに注意してください。
3. 本番環境向けのビルドは、npm runbuildコマンドを実行します。

開発環境向けのビルドでは、実際に参照されていないプラグインやライブラリが含まれているようで、本番環境にデプロイするには向いてないみたいです。本番環境向けのビルドは「build」タスクの実行ボタンをクリックするだけで実行できるようです。

ブラウザで[http://localhost:8080/] にアクセスしてみると、Vue CLIのローカルサーバー上で起動しているアプリケーションの初期画面が表示できました。
![アプリ起動.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/652173/e2e6a53d-fa98-7f20-2e52-a2c0e6e332b5.png)

###ホットリロード機能の確認
アプリケーションの初期画面を開いた状態で、ソースコードを更新すると、自動的にブラウザで反映されるか試してみます。プロジェクトフォルダ内のsrc/App.vueファイルをテキストエディタで開いて、内容を変更してみます。

```bash
#変更前
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

#変更後
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="はじめてVue CLIを導入してみた！"/>
  </div>
</template>
```

![ホットリロード.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/652173/6b5b98d5-0c9d-ec47-250a-e4d2c093b92a.png)

ブラウザをリロードしなくても画面の内容が変更されることが確認できました。ブラウザをリロードしなくてもリアルタイムに反映されるこのホットリロード機能すばらしいですね。

今回はここまで！