【Vue】たった3ステップ、10分でできる Vue 2  のインストール・開発環境構築の方法まとめ（初心者向け）

# 概要
Vue.js 2 (v2.x) の環境構築を行う方法について備忘録
インストール〜起動方法までを３ステップにまとめて記載

参考: [Vue の公式サイト（日本語版）はこちら](https://jp.vuejs.org/)

## 前提
インストール等の環境設定系は、完了していない場合は設定完了してから、後述の「手順」を実施してください。

- 対象バージョンは「**Vue 2** (Vue.js v2.x）」
- PC にテキストエディタをインストール済み
  - 筆者は「Visual Studio Code (VS code)」を使用して説明 
- Node.js をインストール済み
- Webブラウザが Internet Explorer (IE) の場合、「IE8」以下でないこと（サポート対象外のため）
- 主な手段として、CDN によるインストールと、NPM によるインストールがあるが、「NPM」を利用した内容を記載

# 手順
テキストエディタで、ターミナルツール（ツールメニュー「ターミナル」→「新しいターミナル」）を開き、
以降の手順で、インストールと Vue アプリの起動確認をします。

## 【Step 1】 開発支援ツール「Vue CLI」のインストール

以下のコマンドで「Vue CLI」をインストール

```bash
# Vue CLI インストール
npm install -g @vue/cli
```
※ `-g` オプションでグローバルインストール、忘れないように注意
※ エラーが発生した場合の対処法・参考記事は[「こちら」](https://qiita.com/to3izo/items/19f07420ff26ae309a75)

以下のような表示が出ればインストール完了
```bash
# インストールされたファイルのパッケージ数・かかった秒数などが表示される
added 156 packages, removed 192 packages, changed 741 packages, and audited 898 packages in 42s
```

インストール成功確認（任意のコマンドが正常に動作すればOK）

```bash
# バージョン確認コマンド
vue --version
# 実行結果
@vue/cli 5.0.4
```

## 【Step 2】 Vue アプリケーション生成

実際に Vue が動作可能かを確認します。

Vue アプリの生成コマンドは以下
（アプリケーション開発に必要な一連のファイル群をまとめて "プロジェクト" と呼びます）

```bash
vue create {任意のプロジェクト名}
```

試しに、適当なディレクトリを作成して、その中で以下のコマンドを実行し、
テスト用の Vue アプリを作成してみます。

```bash
# 「demo-app」という名前でプロジェクト作成
vue create demo-app
```

Vue CLI のバージョンによっては、実行すると以下のように「Vue 2」「Vue 3」どちらを作成するか質問されますので、カーソルキーで選ぶ

```bash
# バージョン選択を聞かれるので、v2.x を選択
Vue CLI v5.0.4
? Please pick a preset: (Use arrow keys)
  Default ([Vue 3] babel, eslint) 
❯ Default ([Vue 2] babel, eslint) 
  Manually select features 

# 選択後に自動で生成処理を開始...
✨  Creating project in /Users/tommy/Desktop/VueTest/demo-app.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...

⸨######⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⸩ ⠼ idealTree:@vue/babel-preset-app: timing idealTree:node_modules/
```

以下の様に表示されたら、生成完了

```bash
# 生成完了の表示
added 840 packages, and audited 841 packages in 29s

84 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
🚀  Invoking generators...
📦  Installing additional dependencies...


added 83 packages, and audited 924 packages in 5s

94 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project demo-app.
👉  Get started with the following commands:

 $ cd demo-app
 $ npm run serve
```

最後に表示されているのは、実際にPCで起動確認するためのコマンドです

## 【Step 3】 Vue アプリ起動・動作確認

プロジェクトを生成すると、コマンド実行した場所にディレクトリが作られます（今回の例だと「demo-app」）。
ここにコマンドで移動してから、起動コマンドを実行で動作します。

では、早速起動コマンドを実行
```bash
# 生成されたプロジェクトディレクトリに移動
cd demo-app

# アプリ起動
npm run serve
```

以下の表示で起動完了です。ただし、画面は自動で表示されませんので、自分でWebブラウザから開く必要があります。

```bash
 DONE  Compiled successfully in 3218ms                                                                 17:58:49

  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://192.168.1.16:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.
```

表示された「-Local」の URL を、Web ブラウザのアドレスバーに入力して、以下が表示されたら成功です。

![Vue 2 環境構築完了.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/787582/b651a68f-b611-2e9b-5a8d-d127a737dcf5.png)
※ アドレスバーに「`http://localhost:8080/`」をコピペ入力してからエンターキーで表示

#### アプリ停止方法
尚、起動したアプリを停止する方法は、ターミナル上で「`Ctrl + C`」を実行するだけです。
（起動直前の表示状態に戻ればOK）

あとは、実際に作成したテストアプリをいじりながら、Vue の仕組みや書き方を少しずつ理解していきましょう。