【基礎】Vue.js_Vue CLIを導入

## Vue CLI とは？

Vue CLIは、Vue.jsアプリの開発支援ツール。

- 単一ファイルコンポーネント（SFC)
- ページ間の遷移（ルーティング）の定義
- アプリのデータを集中管理

など、より高度なアプリを効率よく開発するためには必須のツール。

Vue CLIを使った開発では１つ１つのコンポーネントを「.vue」で管理する。
Vue CLIが備えているローカルサーバー上では[.vue」をブラウザで実行できるが、
サーバーにアップロードするタイミングでVue CLIの機能でビルドする。
（**コンパイル**（読めるように変換）、**バンドル**（他のアプリと紐づける）をまとめて**ビルド**と呼ぶ）

一般的には**webpack**と呼ばれるモジュールバンドラーを利用する。

## npmについて
npmはJavaScript用のパッケージ管理ツール。
JavaScriptの実行環境であるNode.jsをインストールすると、一緒にインストールされる。
Node.jsをインストールし、Vue CLIをインストールするという流れ。

Node.jsのダウンロードページ
https://nodejs.org/ja/download/

npmとnodeが正常にインストールされたか、バージョンを確認しておく。

```:コマンドライン
> npm -v
6.9.0

> node -v
10.16.3

// 導入したバージョンが表示される
```

### Vue CLIのインストール

```:コマンドライン
> npm install -g @vue/cli

```
インストール状況が表示される、少し時間がかかる。

正常に完了したかバージョン確認

```:コマンドライン
> vue --version
3.11.0

```
Vue CLIのバージョンが表示されればインストール完了。

## Vue CLIの基本的な使い方

Vue CLI 3にはGUIのプロジェクト管理ツールが用意されている。
ツール画面からプロジェクトの作成やソースコードのビルドができる。

プロジェクト管理ツールを起動

```:コマンドライン
> vue ui

```

すると、ブラウザでこんな画面が表示される。
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207237/02ab0a8c-c9ba-e5e2-9055-3faf7b793e69.png)

新たにプロジェクトをつくる場合は
作成タブ　→　「ここに新しいプロジェクトを作成」をクリック

![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207237/7010e81b-7fbc-5d75-522e-84b75f69ec27.png)
プロジェクトフォルダ名を入力　→　保存場所を設定　→　「次へ」をクリック

![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207237/9022c6b0-9f21-28e7-7459-7940e828fbfb.png)
プリセットとは、プロジェクトの初期設定を保存しておいて、次回プロジェクト作成時に再利用できるようにしたもの
最初は babel, eslint を選択でOK　→　「プロジェクトを作成する」をクリック

するとコマンドラインで進捗が表示される。

完了すると、以下のような管理画面が表示される。

![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207237/47a6909b-00a7-760b-4767-b88d874b377d.png)

プリセットに応じたプロジェクトのひな型が自動的に配置されている

![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207237/13d5ad31-5db3-b6af-fec8-4b6040ec3ca4.png)

既にサンプルページのモジュールが配置されているので、ビルドしてすぐ実行することができる。

### 開発環境（ローカル）向けのビルド
プロジェクト管理画面にある左側メニューより
タスク　→　serve　→　「タスクの実行」をクリック

![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207237/e288862f-3dda-4ba2-939b-4aea70129ee4.png)

「出力」タブを開くと、VueCLIでは
- localhost:8080 でアプリを起動
- 開発環境向けのビルドでは最適化が行われていない
- 運用環境向けのビルドはnpm run buildコマンドで行う
ということが最後に書かれている。

http://localhost:8080/　
を開いてみる。

![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207237/6fc04f42-dcfa-d4c2-31e9-526e4ed859f2.png)

この状態でソースコードを更新するとブラウザの表示も更新される。

試しに　「Welcome to Your Vue.js APP」　という文言を変えてみる。

```javascript:src/App.vue
<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/207237/65e3b019-d41a-5757-a4d5-f2cd41ae5971.png)


ブラウザを更新しなくてもモジュールの変更内容がリアルタイムに反映される機能をホットリロードと呼ぶ

### 運用環境向けのビルド

プロジェクト管理画面にある左側メニューより
タスク　→　build　→　「タスクの実行」をクリック

![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207237/89525388-a99d-fb72-49c8-a6135f0b2e72.png)

すると dist ディレクトリが作られており、
ブラウザで実行できる通常のHTML、CSS、JavaScript、その他描画に必要な画像などが入っている。
運用環境にはこれをアップロードする。

![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207237/9b4746be-700a-68ff-c03e-07d0d53ba635.png)

![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207237/03e7a932-bb4c-169c-245b-2f5ad01ccc04.png)

バージョンアップによって使い方など変わることもあるため、必要に応じて調べたり公式ガイドをみて対応すること。

ここまで書いといてあれですが、自分はnuxtが好き。
遠くない未来に誰でも作れるspaアプリwith nuxtてきなのやろうかな。

参考著書
・Vue.jsのツボとコツがゼッタイにわかる本
・Vue.js&nuxt.js超入門
（２冊とも入門には良かったです）