Element+にさわる
UIライブラリを探していたらまだVue.js 3系に対応しているものが少ないようで、その中でも比較的Element+が良さそうだったので触ってみた。
インストール
Element Plus - The world's most popular Vue 3 UI framework
yarn add element-plus
※例によってプロジェクトはviteで作成
src/main.ts を編集
import {createApp} from 'vue'; import App from './App.vue'; import router from './router'; import ElementPlus from 'element-plus'; import 'element-plus/lib/theme-chalk/index.css'; createApp(App).use(router).use(ElementPlus).mount('#app');
src/App.vue を編集
<template lang="pug"> el-container(style="height: 800px; border: 1px solid #eee") el-aside(width="200px") el-menu(:default-openeds="['1']") el-submenu(index="1") template(#title) i.el-icon-menu One el-menu-item-group el-menu-item(index="1-1" @click="moveTo('/')") Home el-menu-item(index="1-2" @click="moveTo('/table')") Table el-submenu(index="2") template(#title) i.el-icon-user Two el-menu-item-group el-menu-item(index="2-1" @click="moveTo('/')") Home el-menu-item(index="2-2" @click="moveTo('/table')") Table el-container el-header.header p Jack el-main router-view </template> <script lang="ts"> import {defineComponent} from 'vue'; import { useRouter } from 'vue-router' export default defineComponent({ name: 'App', setup(props, context) { const router = useRouter() const moveTo = (path: string) => { router.push(path); } return { moveTo, } } }); </script> <style lang="scss" scoped> .header { background-color:darkgray; text-align: right; } </style>
src/views/HomePage.vue を作成
<template lang="pug"> div.home p Hello </template> <script lang="ts"> import { defineComponent } from "vue"; export default defineComponent({ name: "HomePage", }); </script>
src/views/TablePage.vue を作成
<template lang="pug"> el-table(:data="tableData") el-table-column(prop="date" label="Date" width="140") el-table-column(prop="name" label="Name" width="140") el-table-column(prop="address" label="Address" width="*") </template> <script lang="ts"> import { defineComponent } from "vue"; export default defineComponent({ name: "TablePage", setup() { const item = { date: "2021-05-21", name: "Tom", address: "No. 189, Grove St, Los Angeles", }; return { tableData: Array(20).fill(item), }; }, }); </script>