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

Nextremer Advent Calendar 2017 の9日目の記事です。

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

前提

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

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

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)　が提供しているテンプレートの名前です（テンプレートの一覧はこちらにあります）。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/ にアクセスすると、サンプルページが表示されます。

Vuex と Vue Material の導入

Vuex, Vue Material をインストールします。Vuex では、Spread 演算子が使えると便利なので、Babel の transform-object-rest-spread プラグインもインストールします。

$ npm install -S vuex vue-material@beta babel-plugin-transform-object-rest-spread

※vue-material はベータ版をインストールしています

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

.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 については、公式の日本語ドキュメントがあるので、それを読むのがおすすめです（ここではコンポーネントにストアを登録する方法などは省略するので、このあたりのページをご参照ください）。また、他に参考になる記事を挙げます。

• Vue.js で状態管理 Vuex の基本を学ぶ
• 簡単なTODOアプリで Vue + Vuex を学んでみよう

Vue Material

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

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) を使ってみる

src/components/HelloWorld.vue（抜粋）

<template>
  <div class="hello">

    <!-- 略 -->

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

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

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

おわり

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

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