Vue.jsのUIライブラリ「Element」使ってみた

Elementをご存知でしょうか。

Vue.jsのコンポーネントライブラリで高品質なものはいくつもあるそうなのですが、中でもUIライブラリといったらとりあえず「Element」使っておけ、と色々なところで見かけるのでちょうど手頃な小規模案件があったこともあり、一か八か導入してみました!

いくつかのハマりポイントを乗り越えて、先日無事リリースとなりましたので軽くご紹介しておこうと思います。

A Desktop UI Library

前提条件

  • Win10
  • VSCode
  • Vue@2.5.11
  • Element-ui@2.2.1
  • Webpack@3.6.1

npm導入済みという前提で進めます。

準備

便利なのでvue-cliを使いましょう。

インストールしていない方は下記のコマンドを叩いて下さい。

npm i -g vue-cli

vueコマンドでプロジェクト作成

vue init webpack-simple element

色々インストール

npm i

ここまでで、Vue.jsのサンプルプロジェクトは完成のはずです。

動作確認したい方は下記のコマンドを実行してみてください。

npm run dev

Elementの話はここから

本題のElementをインストール

npm i element-ui -S

Elementを導入する場合こちらも必要

npm i style-loader -S
npm i url-loader

webpack.config.jsの設定変更

moduleはこんな感じにすればとりあえず動くと思います。

  module: {
    rules: [
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader'
      },      
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(jpg|png|otf|eot|svg|ttf|woff|woff2)(\?.+)?$/,
        loader: 'url-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },

main.jsにElementをimportする

Elementのバージョン(1.xと2.x)によってCSSのパスが異なるようなのでご注意ください。

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

Vue.use(ElementUI, { locale });

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

動作確認

ローカルで起動してみましょう。

npm run dev

ブラウザが自動起動し、Vue.jsのロゴが表示されたかと思います。

Elementのコンポーネントを使ってみる

DatePicker

App.vue

実行結果

バッチリですね!

サクッとDatePickerが導入できました。

デザインもシンプルで使い勝手がよく、業務システムでも問題なく利用できると思います。

まとめ

こういった高品質なコンポーネントが無料で使えるのは大変助かります。

次はvuetifyを試してみようと思います。