Vue.jsの環境構築 (mac)

## 概要
vue.jsをSPAとして使ってみようと思って環境を作るのに調べた内容をメモしておく。

## node.jsインストール
まず、ベースとなるnode.jsを「brew」と「nodebrew」を使ってインストールしてみる。

```bash:ターミナル
# nodebrewインストール
$ brew install nodebrew
$ mkdir -p ~/.nodebrew/src         # <- フォルダ作ってないとinstallでコケる
$ nodebrew -v
nodebrew 1.0.1

# インストール可能なnode.jsのリストを表示
$ nodebrew ls-remote

# version8.9.4をインストール
$ nodebrew install-binary v8.9.4
$ nodebrew ls
$ nodebrew use v8.9.4

# nodeとnpmコマンドのパスを通す
$ nodebrew setup
$ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile
$ source ~/.bash_profile

# バージョン確認
$ node -v
v8.9.4
$ npm -v
5.6.0
```

## vue-cliインストール
Vue.jsの開発支援用のコマンドをインストールする。
3.x系をインストールするが、2.x系のコマンドも使えるようにしておく（学習用なので...）。

```shell:ターミナル
$ npm install -g @vue/cli
$ npm install -g @vue/cli-init  // <- 2.x系のinitコマンドなども使えるようにする(任意)
$ vue --version
3.0.5
```
※ https://cli.vuejs.org/guide/creating-a-project.html#using-the-gui

## プロジェクト作成
webpackをテンプレートとして指定して作成する。

### initコマンドで作成 (vue-cli2.x系)
```shell:ターミナル
$ vue init webpack app-test

? Project name app-test
? Project description A Vue.js project
? Author reflet <reflet.jp@gmail.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? no
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) npm
```

### createコマンドで作成 (vue-cli3.x系)
2.x系に合わせて、Babel, Router, Unit, E2Eのみ入れてみる（特に意味なし)

```shell:ターミナル
$ vue create app-test

Vue CLI v3.0.5
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Unit, E2E
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a unit testing solution: Jest
? Pick a E2E testing solution: Cypress
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In package.json
? Save this as a preset for future projects? No
```

## 起動
アプリを起動してブラウザで確認する。

### initコマンド (vue-cli2.x系)
```shell:ターミナル
$ cd app-test
$ npm run dev
```

### createコマンド (vue-cli3.x系)
```shell:ターミナル
$ cd app-test
$ npm run serve
```

http://localhost:8080 へアクセスしてページが見れたらOK
![app-test.png](https://qiita-image-store.s3.amazonaws.com/0/142279/ada28055-5fbd-d825-db6f-457744ec05b6.png)

## ファイル構成
インストールされたファイルの構成を確認してみる。

### initコマンド (vue-cli2.x系)
```:ファイル構成
├ build    -> Webpackのビルド用スクリプト
├ config   -> Webpackのビルド設定
├ dist     -> ビルドされたファイルが格納されるフォルダ
├ src
│  ├ assets             -> 画像やフォントなど
│  ├ components
│  │  └ HelloWorld.vue  -> 単一コンポーネント
│  ├ router
│  │  └ index.js        -> ルーティング設定
│  ├ App.vue            -> アプリのルートコンポーネント
│  └ main.js            -> エントリポイント 
│
├ static                -> Loaderを介さずそのままdistに含めるファイル
├ tests
│  ├ e2e                -> エンドツーエンドテストコード
│  └ unit               -> Unitテストコード
│
├ index.html            -> SPAのインデックスになるHTMLテンプレート
├ package.json          -> npmで管理されているパッケージの依存関係を記したファイル　
└ package-lock.json
```

### createコマンド (vue-cli3.x系)
2.x系とは、結構変わってるようですね、スッキリして見やすくなった感がします。

```:ファイル構成
├ public
│  ├ favicon.ico
│  └ index.html
├ src
│  ├ assets
│  │  └ logo.png
│  ├ components
│  │  └ HelloWorld.vue
│  ├ views
│  │  ├ Home.vue
│  │  └ About.vue
│  ├ App.vue
│  ├ main.js
│  └ router.js
├ tests
│  ├ e2e
│  └ unit
├ babel.config.js
├ cypress.json
├ package-lock.json
└ package.json
```

## ちょっと加工してみる
App.vueとHelloWorld.vueをいじってみる。

```html:App.vue
<template>
  <div id="app">
    <router-view/>
  </div>
</template>

... (その他は変更なし)
```

```html:HelloWorld.vue
<template>
  <div class="hello">
    <h1>Hello Vue.js</h1>
    <p>{{ msg }}</p>
  </div>
</template>

... (その他は変更なし)
```

![modify.png](https://qiita-image-store.s3.amazonaws.com/0/142279/43ae0188-01a7-2611-b9bd-a53e653286ec.png)

ホットリロードで修正がシームレスに反映されるので、開発効率がいいですね♪

## まとめ
サーバも不要で簡単にインストールして動かせるのでかなりお手軽です。
フロント系の開発するのが楽しくなりそうですね。

## 参考サイト
* [【2018年版】macのhomebrewでnodebrew入れてからnode.jsを入れるまで](https://qiita.com/Alex_mht_code/items/422f5ce10d9c9d5729b7)
* [GitHub - vuejs / vue-cli](https://github.com/vuejs/vue-cli)
* [Github - vuejs-templates](https://github.com/vuejs-templates)
* [Vue CLI 3](https://cli.vuejs.org/guide/creating-a-project.html#using-the-gui)