最近、Vue.jsを使う機会がありました。今まではjQueryを使用してゴリゴリ書いていたのですが、Vue.jsなかなか使いやすいです。
そんなVue.jsの高機能なUIパーツが使えるコンポーネントのライブラリElement　UIを使用したところ簡単にいい感じで使うことが出来たため、紹介します。

環境は、
Vue.js v2.5.2
element-ui v2.0.0
です。

Vue.jsとは？

Vue.jsを知らない人もいると思います。Vue.jsとは、JavaScriptのフレームワークで、MVVMと呼ばれる設計パターンを採用しているフレームワークです。MVVMフレームワークではModel、View、 ViewModel の3つでアプリケーションを構築します。
機能こそAngularJSやKnockout.jsより少ないものの、そのシンプルさから、使いこなすための学習コストも低く、とても簡単にフレームワークの恩恵を受けることが出来ます。
jQueryしか使用したことのない人は、ぜひVue.jsからJavaScriptのフレームワークを学んでみてはどうでしょうか。

Vue.jsの詳細について知りたい方は、ぜひ、公式ページをご覧ください。

Element UIとは？

Element (element-ui) はVue.js(2系統)で使用するUIコンポーネント集です。Elementを使うと、高品質なアプリケーションのUIを簡単に構築することができます。
Elementで使用することが出来るUIを知りたい方は、公式ページを参照ください。

npmコマンドとCDNについて

ReactやAngularなどを使う際と同様Vue.jsを使用する際にもnpmコマンドを使用し、それぞれの環境の中で開発環境を用意する方法もありますが、今回は、CDNとしてVue.jsを動かしてみます。
CDNとは、jQueryなどを使用する際に下記のように記載して、jQueryを動かす方法のことを言っています。

Vue.jsとElementを日本語で使用する方法

上記のようにVue.jsとElementのCDNを読み込みます。これらの順番は上記のままで変更しないようにしてください。
Elementは中国の人が開発したライブラリのようでデフォルトのまま使用するとデートピッカーなどが中国語になってしまいます。なので、日本語で使用するために、「/locale/ja.js」のファイルを読み込むのを忘れないようにしてください。

日本語でElementを使用するためのJSを読み込みましたが、まだそれを使用していません。下記のように「new Vue」をする前に、「 ELEMENT.locale(ELEMENT.lang.ja)」と記載しましょう。

これでElement UIを日本語で使用することが出来るようになります。