vue-cliでフロント開発環境を作った話

# はじめに

※社内の勉強会用発表資料を再構成しています
フロントエンドとバックエンドを分離したシステム開発で、フロントエンド側の開発環境の構築を任されました。
フロントの要件は`Vue.jsを使うこと`、`フロント開発の勉強も兼ねること`の2つでした。
そこで、`vue-cli`を使ってサクッとフロント開発環境を作ってみました。

# 環境

- Mac OSX El Capitan
- Node.js 10.11.0
- npm 6.4.1


# 要求と方針

- フロントとバックを分離したシステム
	- フロントからAPIをコールするSPA
- 「フロントの環境用意しておいて」
	- 指定は「Vue.jsを使う」、「フロント開発の勉強を兼ねる」

テストがない開発はイケてないだろうという発想のもと、フロント開発の勉強としてテストフレームワークを導入しました。

これらの準備を、`vue-cli`を使ってサクッと準備してみます！

# 手順
## 手順(1)

まずは`vue-cli`をグローバルにインストールします。
最新の3.0系は`@vue/cli`という名前になっているので、間違えないよう気をつけます。

```terminal
npm i -g @vue/cli
vue create project-name
```

## 手順(2)

`vue create`のコマンドで、Vueプロジェクトの作成を開始します。
以下のような表示が出てくるので、今回は`Manually select features`を選びます 

<img width="600" alt=“vue_create_1” src="https://qiita-image-store.s3.amazonaws.com/0/226689/f5e6a18a-5090-551d-506f-6dbfaf3b68f2.png">


## 手順(3)

色々と出てくるので、使いたいモジュールを選択していきます。

<img width="750" alt="vue_create_2" src="https://qiita-image-store.s3.amazonaws.com/0/226689/001e4c2d-6bbe-474b-0256-7f5fa085fe0f.png">

## 手順(4)

今回は、

- Babel
- Router
- Vuex
- CSS Pre-processer
- Linter/Formatter
- Unit Testing

にチェックしました。
自分でプロジェクトを作る際には、使いたいものを選びましょう。

## 手順(5)

選択したモジュールについて、その設定をいろいろと聞かれるので適当に答えましょう。
設定は後からでも変更できます。
今回は

- `SCSS/SASS`
- `ESlint with error prevention only`
- `Mocha + Chai`
- `In dedicated config files`

にしました。
SCSS/sassを使うこと、ESlintを導入すること、Mocha + Chaiのテストフレームワークを使うこと、別々の設定ファイルを用意すること、を設定しています。

# 使い方
## 使い方(1)

プロジェクトを作成した段階で、初めからnpm scriptが用意されています。
例えば、以下のようなものです。

```terminal
npm run serve
```
→開発モードでwebpack-serverをスタートさせる
http://localhost:8080 でアクセスできます。
watchモードにもなっているので、コードに変更を加えるとホットリロードされる仕組みになっています。

```terminal
npm run build
```
→本番用のファイルを`dist/`以下に出力します。

## 使い方(2)

`vue add <プラグイン名>`で、プロジェクトにプラグインを追加します

例：

```terminal
vue add bootstrap
```

この場合、

```terminal
npm i --save-dev @vue/cli-plugin-bootstrap
```

と同じ動作をします。
`vue-cli`に統合しやすいようラップされたbootstrapのモジュールを一発でプロジェクトに追加できる！という仕組みになっています。
どんなプラグインがあるかは、[npmの公式ページ](https://www.npmjs.com/) で確認できます
`vue-cli-plugin`で検索してみましょう。

## 使い方(3)
vue-cli-pluginが存在しないパッケージについては、普通にnpm installします

例：

```terminal
npm i --save-dev mocky
```

ちなみに、`mocky`はAPIレスポンスをモックするライブラリです。
APIとフロントで別開発なので、フロントだけで動かせるように用意したモジュールですね。

## 使い方(まとめ)

1. `@vue/cli`をインストール
2. `@vue/cli`でプロジェクトを立てる
3. 使いたいプラグインを指定する
4. プラグインにないモジュールをインストールする
5. できた！！！

# 余談
## 実際作ってみて

簡単にまとめた手順を紹介しましたが、実際にはもうちょっと手間取りながら作ってます。
しかし、次回以降同じようなプロジェクトを作る際には、30分もかからずに出来上がるんじゃないかと思います。
使い方が分かれば**爆速**でプロジェクトを作れるので、ぜひ触ってみてください。

vue-cliで**快適なフロントエンドライフ**を送りましょう！

## おまけ(1)

```json:package.json
{
  "name": "プロジェクト名",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "mock": "node mock.js",
    "test:unit": "NODE_ENV=developent vue-cli-service test:unit"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "bootstrap": "^4.1.3",
    "jquery": "^3.3.1",
    "popper.js": "^1.14.4",
    "vue": "^2.5.17",
    "vue-router": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.1.1",
    "@vue/cli-plugin-eslint": "^3.1.1",
    "@vue/cli-plugin-unit-mocha": "^3.2.0",
    "@vue/cli-service": "^3.1.1",
    "@vue/test-utils": "^1.0.0-beta.20",
    "babel-eslint": "^10.0.1",
    "chai": "^4.1.2",
    "eslint": "^5.8.0",
    "eslint-plugin-vue": "^5.0.0-0",
    "mocky": "^0.1.11",
    "node-sass": "^4.9.0",
    "sass-loader": "^7.0.1",
    "sinon": "^7.1.1",
    "vue-template-compiler": "^2.5.17"
  }
}

```

# 奥付

2018/11/30 初稿
2018/12/31 全体公開用に改稿