Element UI (Vue Component Library) の導入

はじめに

フロント : Vue
バック : Laravel
で開発をしていた際に、楽にUI作れないかなーと思い探した結果見つけた

• Element UI

を導入してみます。

インストール

公式ドキュメント
npm でインストールします。

npm i element-ui -S

npm installの-Sオプションについて
上記にもある通り、「-S」は必要ないかもしれないですが、私は公式通りに導入しました。

app.jsに追記

公式ドキュメントの通りに下記を追記

app.js

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

Vue.use(ElementUI);

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

終わりに

上記手順が終われば、あとは公式ドキュメントにあるようなボタン、ラジオボタン、チェックボックスが使えるようになります。超便利で手軽！！

関連記事

【Element UI】Component Sample