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>