Vue.jsでコンポーネントフレームワークのElement導入3分クッキング

はじめに

まずエレメント導入前に
Vue.jsとMaterializeを組み合わせてはイケない理由
こんな事をしてしまってElement UIを使う形になりました。

導入ステップ

npm で導入

npm i element-ui -S

main.jsで必要なモジュールを読み込み
プラグインに登録して、すべてのコンポーネントでElement UIのコンポーネントが利用できるように設定

main.js

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

コンポーネントを配置

各コンポーネントでは予め定義されたコンポーネントを呼び出します。
単純に確認するだけなら、ボタン系のコンポーネントを配置してみるのが良いかなと思います。

Sample.vue

<el-button>Default</el-button>

展望

次回はFormコンポーネントを使った便利なバリデーションの実装を予定しています。
小生の知見で良ければ見てみてください～