Vue.jsで高品質なUIライブラリElementを使ってみる

準備

今回はvue-cliのwebpackで試してみます。
インストールしていない場合は下記で vue-cli をグローバルにインストール。

$ sudo npm install -g vue-cli

これでvueコマンドが使えるので、プロジェクトを作成しカレントにします。

$ vue init webpack-simple element-test
$ cd element-test

npmパッケージをローカルにインストールします。
element-ui の他に style-loader もインストールします。

$ npm install
$ npm i element-ui -S
$ npm i style-loader -S

webpack.config.js の module の部分を下記のようにします。

webpack.config.js

module: {
    loaders: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader'
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
        loader: 'file-loader'
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?\S*)?$/,
        loader: 'file-loader',
        query: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },

これでVueでElementを使用する準備が整いました。
下記コマンドを実行してブラウザにVueのロゴが表示されることを確認してください。

$ npm run dev

これでsrcディレクトリのファイルを更新すると自動的にビルドが走ります。

使い方

main.js にimportを追加して、Vue.use で言語の設定をします。

src/main.js

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
import locale from 'element-ui/lib/locale/lang/ja'
import App from './App.vue'

Vue.use(ElementUI, { locale })

new Vue({
  el: '#app',
  render: h => h(App)
})

これでvueファイルでコンポーネントを使えるようになりました。

ColorPicker

いくつかコンポーネントを使ってみましょう。
まずはカラー選択

src/App.vue

<template>
  <div id="app">
    <div class="block">
      <el-color-picker v-model="color"></el-color-picker>
    </div>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      color: '#20a0ff'
    }
  }
}
</script>

DateTimePicker

日付と時間が選択できるのとか便利ですよね。

src/App.vue

<template>
  <div id="app">
    <div class="block">
      <el-date-picker
        v-model="value"
        type="datetime"
        placeholder="日付の選択">
      </el-date-picker>
    </div>
  </div>
</template>

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

というわけで Element はデイトピッカーとかモーダルなどちょっと特殊なものから、単純な入力フォームやグリッドまでよく使うコンポーネントがまとめられているので、VueでWebアプリ作成するなら使ってみるのもいいかもしれません。

他にも色々コンポーネントがあるので下記サイトを確認してください。

Element