Vue.js + Vuex + Vue Material を使った Web アプリ開発の始め方

[Nextremer Advent Calendar 2017](https://qiita.com/advent-calendar/2017/nextremer) の9日目の記事です。

Vue.js + Vuex + Vue Material を使って Web アプリを開発するための、（できるだけ楽な）導入方法について説明します。


## 前提

Node.js, NPM はインストール済みとします。

## vue-cli でプロジェクトの scaffolding

[vue-cli](https://github.com/vuejs/vue-cli) を使うと、Webpack (+ Babel) や Linter などの設定を勝手に行ってくれて、プロジェクトの環境構築が楽になります。次のコマンドで vue-cli をグローバルインストールします。

```
$ npm install -g vue-cli
```

vue-cli をインストールしたら、早速プロジェクトを作成してみます。

```
$ vue init webpack vuejs-sample

? Project name vuejs-sample
? Project description A Vue.js project
? Author hoge!hoge! <hoge!hoge!@nextremer.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
```

上のコマンド1行目の `webpack` は vue-cli (Vue.js)　が提供しているテンプレートの名前です（テンプレートの一覧は[こちら](https://github.com/vuejs/vue-cli#official-templates)にあります）。`vuejs-sample` はプロジェクト名なので任意の名前で OK です。

コマンドを実行するといろいろと質問が出てきますが、Enter 連打でも問題ありません（上の例）。vue-router, unit tests, e2e tests あたりは不要であれば `No` で良いと思います。

質問が終わると、次に実行するコマンドが指示されるので従ってみます。

```
$ cd vuejs-sample
$ npm install
$ npm run dev
```

`npm run dev` で、ホットリロード付きの開発サーバが立ち上がります。この状態で http://localhost:8080/ にアクセスすると、サンプルページが表示されます。

![advent2017-vue-1.png](https://qiita-image-store.s3.amazonaws.com/0/19511/39be2155-1495-8b5a-e606-243f954b525f.png)


## Vuex と Vue Material の導入

Vuex, Vue Material をインストールします。Vuex では、Spread 演算子が使えると便利なので、Babel の [transform-object-rest-spread](https://babeljs.io/docs/plugins/transform-object-rest-spread/) プラグインもインストールします。

```
$ npm install -S vuex vue-material@beta babel-plugin-transform-object-rest-spread
```
※`vue-material` はベータ版をインストールしています

Spread 演算子をトランスパイル可能にするために、`.babelrc` を編集します。

```json:.babelrc
{
  // 略

  "plugins": ["transform-runtime", "transform-object-rest-spread"],

  // 略
}
```

### Vuex

Vuex のストア用に、 `src` 配下に `store` ディレクトリを作成します。`store` ディレクトリには、とりあえず `index.js` を置いてそこでストア本体を定義すれば良いでしょう（必要に応じて `actions.js`, `mutations.js`, `mutation-types.js`, `getters.js` などを作ったりします）。

Vuex については、[公式の日本語ドキュメント](https://vuex.vuejs.org/ja/)があるので、それを読むのがおすすめです（ここではコンポーネントにストアを登録する方法などは省略するので、[このあたりのページ](https://vuex.vuejs.org/ja/core-concepts.html)をご参照ください）。また、他に参考になる記事を挙げます。

- [Vue.js で状態管理 Vuex の基本を学ぶ](http://chibinowa.net/note/vuejs/vue-11.html)
- [簡単なTODOアプリで Vue + Vuex を学んでみよう](http://www.webopixel.net/javascript/1240.html)

### Vue Material

`src/main.js` に次のコードを記述すれば、`.vue` ファイルにて Vue Material が使えるようになります。

```js:src/main.js（抜粋）
import VueMaterial from 'vue-material'
import 'vue-material/dist/vue-material.min.css'
import 'vue-material/dist/theme/default.css'  // これが無いと md-primary が効かなかった

Vue.use(VueMaterial)
```

例: ボタン (md-button) を使ってみる

```html:src/components/HelloWorld.vue（抜粋）
<template>
  <div class="hello">

    <!-- 略 -->

    <md-button class="md-raised md-primary">Sample</md-button>
  </div>
</template>
```

これだけでこんな感じのボタンができます。

![advent2017-vue-2.png](https://qiita-image-store.s3.amazonaws.com/0/19511/af9874f9-ef12-077c-19a1-6c64f820f3fe.png)


Vue Material の使い方ついても[公式ページ](https://vuematerial.io/)を読むのが良いと思います。さまざまな UI コンポーネントが提供されており、それっぽいデザインが簡単に作れるので便利です。


## おわり

環境構築はこれで終了です。あとは自由に Web アプリを作っていきましょう。

本記事のコードは GitHub にアップロードしました。
https://github.com/tanikawa04/vuejs-sample