Vue.js製のUIフレームワーク「Element」の使い方

株式会社SCOUTERの小平(id:ryotakodaira) です。

弊社では、フロントエンドの開発にVue.jsを導入しており、現場では主にVue.js製のUIフレームワーク「Element」を使用して、ページの見ためを表現しています。

先日、「Element」が2系にメジャーアップデートされ、npm trendsで他のVue.js製のUIフレームワークと比較しても注目されていることが明らかです。

www.npmtrends.com

また、1系で微妙だなと感じていた部分がだいぶ改善されていて、今後の発展が楽しみです！今回は「Element」の使い方についてまとめてみました。

f:id:ryotakodaira:20171114014815p:plain — Element

検証実施環境

Vue.js ^2.5.0
Element ^2.0.0
yarn ^1.0.0

インストール

今回は yarn を使ってインストールします。

yarn add element-ui

コンポーネントの使用方法

Elementの読み込み

import Vue from 'vue'
import App from './App'
+ import ElementUI from 'element-ui'
+ import 'element-ui/lib/theme-chalk/index.css'
import router from './router'

+ Vue.use(ElementUI)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

上記の方法で読み込みを行うと、Element全体をインポートすることになるため、一部のコンポーネントを利用できるようにしてなるべくプロジェクトを小さく抑えたい場合には babel-plugin-component を用います。

yarn add -D babel-plugin-component

続けて、babel.rcを編集します。

"plugins": [["component", [
    {
      "libraryName": "element-ui",
      "styleLibraryName": "theme-chalk"
    }
  ]]]

もし、Buttonのみを使用したい場合には、以下のようにインポートします。

Vue.use(Button)

また、Elementはi18nの設定を行うことで日本語対応することが出来ます。

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

- Vue.use(ElementUI)
+ Vue.use(ElementUI, { locale })

これでElementを使うための準備は完了です。

コンポーネントの呼び出し

実際のコンポーネントの呼び出しは非常に簡単で、こちらのドキュメントを参考に呼び出すことが出来ます。

Elementはドキュメントが充実しているうえに、様々なpropsが用意されているため、カスタマイズもしやすくなっています。

<el-input placeholder="Please input" v-model="input1"></el-input>

<el-time-select
  v-model="input2"
  :picker-options="{
    start: '08:30',
    step: '00:15',
    end: '18:30'
  }"
  placeholder="Select time">
</el-time-select>

<script>
export default {
  data() {
    return {
      input1: '',
      input2: ''
    }
  }
}
</script>

一部のコンポーネントだけを使用したい場合にも、以下のように使いたいコンポーネントを直接指定してあげることで実現できます。

<el-switch v-model="value1">
</el-switch>

<script>
import { ElSwitch } from 'element-ui'

export default {
  components: { ElSwitch },
  data() {
    return {
      value1: ''
    }
  }
}
</script>