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

Vue.js 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>

まとめ

今回紹介した「Element」は学習コストも低く、公式のドキュメントも豊富なため、あまり工数の取れないプロジェクトにもサクッと導入することができるので、プロダクトの初期段階には向いているなという印象です。（実際に弊社でも立ち上げでElementを導入している場合が多いです）

個人的には特にフォーム関連のコンポーネントが充実していて、自作するのはちょっとなー。。。みたいなコンポーネントが多数用意されているのでかなり助かっています。笑

 

さいごに

弊社では、Laravel・Vue.jsをテーマに勉強会を開催しています！もし興味が御座いましたらお気軽に参加してみてください。

laravue.connpass.com