Edited at

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

More than 1 year has passed since last update.

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/ にアクセスすると、サンプルページが表示されます。

advent2017-vue-1.png


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 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>


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

advent2017-vue-2.png

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


おわり

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

本記事のコードは GitHub にアップロードしました。

https://github.com/tanikawa04/vuejs-sample