やりたいこと
VueのUIフレームワークであるElement Plusを試す。
環境構築から、軽い画面作成まで行う。
Element UI と Element Plus の違い
Element UI と Element Plus は、どちらも Vue.js のUIライブラリで、同じELEMEのチームによって開発・管理されています。
Element UIはVue 2に対応しており、Vue 3には対応していませんがElement PlusはVue 3 に対応しています。
Element UIはメンテナンスモードに入り、新機能やアップデートの提供は低頻度になっています。
環境
- Vue3
- Vite
- TypeScript
- Element Plus
インストール
viteで新規プロジェクトを作成します。
実行すると対話形式で「プロジェクト名」「使用するフレームワーク」「言語」を聞かれるので、適当に解答します。
今回はフレームワークはVue、言語はTypeScriptとします。
プロジェクトの作成
npm create vite@latest
一旦 起動確認
以下のコマンドで起動確認を行います。
cd プロジェクト名
npm install
npm run dev
このViteの画面が表示されたら、ここまではOKです。
Element Plus のインストール
次は本命のElement Plusをインストールしていきます。
npm install element-plus --save
次にmain.tsとApp.vueの中身を以下のように書き換えます。
main.ts
import { createApp } from 'vue'
import './style.css'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')
App.vue
<template>
<el-button type="primary">ボタン</el-button>
</template>
以下のように表示されれば、Element Plusは無事に動いています。
コンポーネントを適当に配置してみる
ここではソースは割愛しますが、公式のコンポーネントリファレンスを参考に、簡易的なレイアウト作成し、カードやテキストボックスなどを配置してみました。
成果物
今回作ったものは以下のリポジトリにアップしてあります。
参考