はじめに

※社内の勉強会用発表資料を再構成しています
フロントエンドとバックエンドを分離したシステム開発で、フロントエンド側の開発環境の構築を任されました。
フロントの要件は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という名前になっているので、間違えないよう気をつけます。

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

手順(2)

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

手順(3)

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

手順(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が用意されています。
例えば、以下のようなものです。

npm run serve

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

npm run build

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

使い方(2)

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

例：

vue add bootstrap

この場合、

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

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

使い方(3)

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

例：

npm i --save-dev mocky

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

使い方(まとめ)

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

余談

実際作ってみて

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

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

おまけ(1)

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 全体公開用に改稿

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