VuejsのコンポーネントライブラリElementUIを使ってみた

# ElementUIとは
- Vue.jsのコンポーネントライブラリ
- よく使うデザインやフォームのコンポーネントがあるので、使い所が多そう。
- 既存のVueのコードにそのまま追加して利用できるのでオススメです。
- アニメーションだったりはコンポーネントにおまかせして、ロジックに注力できるので大変便利！

# VueCLI
- インストール
[Vuejs公式](https://jp.vuejs.org/v2/guide/installation.html#NPM)
- `npm run dev`まで実行

# 実装
## インストール
```bash
cd my-project
npm i element-ui -S
```

## main.js
- 以下の記述を追加します。
 
```js:src/main.js
// ElementUI
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'

// ElementUIでの言語設定、datePickerとかで適用される
import locale from 'element-ui/lib/locale/lang/ja'

Vue.use(ElementUI, {locale});
```

## スライドバー
- [ここ](http://element.eleme.io/#/en-US/component/layout)から使いたいやつを探します。
- `App.vue`に追加していきます。

```html:App.vue
<template>
    <div id="app">

        <div class="block">
            <span class="demonstration">スライダー</span>
            <el-slider v-model="value1"></el-slider>
        </div>

        <!-- コンポーネントで変化する値を利用してみる -->
        <div>{{ value1 }}</div>

    </div>
</template>

<script>
  export default {
    name: 'app',
    data() {
      return {
        value1: 50,
    },
  }
</script>
```

ブラウザで確認すると、↓になりました。
カーソルをあわせると吹き出しが出るようになってます。

<img width="493" alt="スクリーンショット 2017-10-04 22.22.17.png" src="https://qiita-image-store.s3.amazonaws.com/0/58712/f48a9047-ecb8-7f5c-b7a5-66ef87abc6c1.png">


## datePicker
```html:App.vue
<template>
    <div id="app">

        <!-- 追加 -->
        <span class="demonstration">日付</span>
        <el-date-picker
                v-model="value2"
                type="date"
                placeholder="日付を選んでください">
        </el-date-picker>

    </div>
</template>

<script>
  export default {
    name: 'app',
    data() {
      return {
        value1: 50,
        value2: '',
      }
    },
  }
</script>
```
確認、ちゃんと日本語になってます。

<img width="358" alt="スクリーンショット 2017-10-04 22.25.01.png" src="https://qiita-image-store.s3.amazonaws.com/0/58712/5f2acead-34d1-46ad-ce8f-9d5853bb99cc.png">

## 入力フォーム
- rulesにvalidationルールを渡せるようです。

```html:App.vue
<template>
    <div id="app">

        <!-- 追加 -->
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
            <el-form-item label="年齢" prop="age">
                <el-input type="number" v-model="ruleForm.age" auto-complete="off"></el-input>
            </el-form-item>
        </el-form>

    </div>
</template>

<script>
  export default {
    name: 'app',
    data() {
      return {
        ruleForm: {
          age: 0
        },
        rules: {
          age: [
            {
              validator: (rule, value, callback) => {
                if (!value) {
                  return callback(new Error('値を入力してください'));
                }
                if (value > 51) {
                  return callback(new Error('年齢は50歳以下にしてください'));
                }
              },
              trigger: 'change'
            }
          ]
        }
      }
    },
  }
</script>
```

エラーが出るとデザインも変化！
<img width="444" alt="スクリーンショット 2017-10-04 23.16.01.png" src="https://qiita-image-store.s3.amazonaws.com/0/58712/3f82ffc7-8b84-eb5c-db83-d85dcbe76559.png">


## 入力フォームとスライダーを組み合わせてみる
- さきほどのスライダーのソースのv-model部分を書き換えて、スライダーで年齢入力できるようにしてみる。
 
```html:App.vue
<!-- スライダーを以下に修正 -->
<div class="block">
    <el-slider v-model="ruleForm.age"></el-slider>
    <div>{{ ruleForm.age }}</div>
</div>
```
スライダーを動かすと自動で年齢が変化し、バリデーションも効いてます！
<img width="643" alt="スクリーンショット 2017-10-04 22.46.04.png" src="https://qiita-image-store.s3.amazonaws.com/0/58712/8fca2975-999a-3243-2dd0-956f6e840291.png">

# まとめ
- 既存ソースにも簡単に追加でき、とても便利かと思います。
- モックもすばやく作れて良さそう！