Vite + TypeScript + Ant Design

On the basis of (1), Antdv is introduced globally

Github address: github.com/zptime/shan…

1. Set up basic layout

Antdv Layout Document: 2x.antdv.com/components/…

Create a layout/index.vue file in the SRC directory

<template>
  <a-layout style="min-height: 100vh">
    <a-layout-sider v-model:collapsed="collapsed" collapsible>
      <div class="logo" />
      <a-menu theme="dark" v-model:selectedKeys="selectedKeys" mode="inline">
        <a-menu-item key="1">
          <pie-chart-outlined />
          <span>Option 1</span>
        </a-menu-item>
        <a-menu-item key="2">
          <desktop-outlined />
          <span>Option 2</span>
        </a-menu-item>
        <a-sub-menu key="sub1">
          <template #title>
            <span>
              <user-outlined />
              <span>User</span>
            </span>
          </template>
          <a-menu-item key="3">Tom</a-menu-item>
          <a-menu-item key="4">Bill</a-menu-item>
          <a-menu-item key="5">Alex</a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sub2">
          <template #title>
            <span>
              <team-outlined />
              <span>Team</span>
            </span>
          </template>
          <a-menu-item key="6">Team 1</a-menu-item>
          <a-menu-item key="8">Team 2</a-menu-item>
        </a-sub-menu>
        <a-menu-item key="9">
          <file-outlined />
          <span>File</span>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header style="background: #fff; padding: 0">
        <menu-unfold-outlined
          v-if="collapsed"
          class="trigger"
          @click="() => (collapsed = ! collapsed)"
        />
        <menu-fold-outlined
          v-else
          class="trigger"
          @click="() => (collapsed = ! collapsed)"
        />
      </a-layout-header>
      <a-layout-content style="margin: 0 16px">
        <a-breadcrumb style="margin: 16px 0">
          <a-breadcrumb-item>User</a-breadcrumb-item>
          <a-breadcrumb-item>Bill</a-breadcrumb-item>
        </a-breadcrumb>
        <div
          :style="{ padding: '24px', background: '#fff', minHeight: '360px' }"
        >
          Bill is a cat.
          <router-view v-slot="{ Component }">
            <keep-alive>
              <component :is="Component" />
            </keep-alive>
          </router-view>
        </div>
      </a-layout-content>
      <a-layout-footer style="text-align: center">
        Ant Design ©2018 Created by Ant UED
      </a-layout-footer>
    </a-layout>
  </a-layout>
</template>
<script lang="ts">
  import {
    PieChartOutlined,
    DesktopOutlined,
    UserOutlined,
    TeamOutlined,
    FileOutlined,
    MenuUnfoldOutlined,
    MenuFoldOutlined,
  } from "@ant-design/icons-vue";
  import { defineComponent, ref } from "vue";
  export default defineComponent({
    components: {
      PieChartOutlined,
      DesktopOutlined,
      UserOutlined,
      TeamOutlined,
      FileOutlined,
      MenuUnfoldOutlined,
      MenuFoldOutlined,
    },
    data() {
      return {
        collapsed: ref<boolean>(false),
        selectedKeys: ref<string[]>(["1"]),}; }});</script>
<style>
  .logo {
    height: 32px;
    margin: 16px;
    background: rgba(255.255.255.0.3);
  }

  .site-layout .site-layout-background {
    background: #fff;
  }
  [data-theme="dark"] .site-layout .site-layout-background {
    background: # 141414;
  }

  .trigger {
    font-size: 18px;
    line-height: 64px;
    padding: 0 24px;
    cursor: pointer;
    transition: color 0.3 s;
  }
  .trigger:hover {
    color: #1890ff;
  }
</style>
Copy the code

Example Modify the router/index.ts route configuration

const Layout = () = > import("@/layout/index.vue");
const routes = [
  {
    path: "/".component: Layout,
    redirect: "/home".children: [{path: "/home".name: "home".component: () = > import("comps/HelloWorld.vue"),},],},];Copy the code

2. Modular transformation

The above basic layout is all in one file, inconvenient to maintain and expand, so modular transformation

After the transformation, the catalog is as follows:

Create a new Layout /sider/index.vue file

<template>
  <a-layout-sider v-model:collapsed="collapsed" collapsible>
    <div class="logo" />
    <a-menu theme="dark" v-model:selectedKeys="selectedKeys" mode="inline">
      <a-menu-item key="1">
        <pie-chart-outlined />
        <span>Option 1</span>
      </a-menu-item>
      <a-menu-item key="2">
        <desktop-outlined />
        <span>Option 2</span>
      </a-menu-item>
      <a-sub-menu key="sub1">
        <template #title>
          <span>
            <user-outlined />
            <span>User</span>
          </span>
        </template>
        <a-menu-item key="3">Tom</a-menu-item>
        <a-menu-item key="4">Bill</a-menu-item>
        <a-menu-item key="5">Alex</a-menu-item>
      </a-sub-menu>
      <a-sub-menu key="sub2">
        <template #title>
          <span>
            <team-outlined />
            <span>Team</span>
          </span>
        </template>
        <a-menu-item key="6">Team 1</a-menu-item>
        <a-menu-item key="8">Team 2</a-menu-item>
      </a-sub-menu>
      <a-menu-item key="9">
        <file-outlined />
        <span>File</span>
      </a-menu-item>
    </a-menu>
  </a-layout-sider>
</template>

<script lang="ts">
  import {
    PieChartOutlined,
    DesktopOutlined,
    UserOutlined,
    TeamOutlined,
    FileOutlined,
  } from "@ant-design/icons-vue";

  import { defineComponent, ref } from "vue";
  export default defineComponent({
    components: {
      PieChartOutlined,
      DesktopOutlined,
      UserOutlined,
      TeamOutlined,
      FileOutlined,
    },
    data() {
      return {
        collapsed: ref<boolean>(false),
        selectedKeys: ref<string[]>(["1"]),}; }});</script>

<style scoped>
  .logo {
    height: 32px;
    margin: 16px;
    background: rgba(255.255.255.0.3);
  }
</style>
Copy the code

Create a layout/header/index.vue file

<template>
  <a-layout-header style="background: #fff; padding: 0">
    <menu-unfold-outlined
      v-if="collapsed"
      class="trigger"
      @click="() => (collapsed = ! collapsed)"
    />
    <menu-fold-outlined
      v-else
      class="trigger"
      @click="() => (collapsed = ! collapsed)"
    />
  </a-layout-header>
</template>

<script lang="ts">
  import { MenuUnfoldOutlined, MenuFoldOutlined } from "@ant-design/icons-vue";
  import { defineComponent, ref } from "vue";

  export default defineComponent({
    components: {
      MenuUnfoldOutlined,
      MenuFoldOutlined,
    },
    data() {
      return {
        collapsed: ref<boolean>(false),}; }});</script>

<style lang="scss" scoped>
  .trigger {
    font-size: 18px;
    line-height: 64px;
    padding: 0 24px;
    cursor: pointer;
    transition: color 0.3 s;
    &:hover {
      color: #1890ff; }}</style>
Copy the code

Create a layout/footer/index.vue file

<template>
  <a-layout-footer style="text-align: center">
    Ant Design ©2018 Created by Ant UED
  </a-layout-footer>
</template>

<script lang="ts">
  import { defineComponent } from "vue";

  export default defineComponent({});
</script>

<style></style>
Copy the code

Create a layout/main/index.vue file

<template>
  <a-layout-content style="margin: 0 16px">
    <Breadcrumb />
    <div :style="{ padding: '24px', background: '#fff', minHeight: '360px' }">
      Bill is a cat.
      <router-view v-slot="{ Component }">
        <keep-alive>
          <component :is="Component" />
        </keep-alive>
      </router-view>
    </div>
  </a-layout-content>
</template>

<script lang="ts">
  import { defineComponent } from "vue";
  import Breadcrumb from "./breadcrumb.vue";

  export default defineComponent({
    components: {
      Breadcrumb,
    },
    data() {
      return{}; }});</script>

<style></style>
Copy the code

The new layout/main/breadcrumb. Vue file

<template>
  <a-breadcrumb style="margin: 16px 0">
    <a-breadcrumb-item>User</a-breadcrumb-item>
    <a-breadcrumb-item>Bill</a-breadcrumb-item>
  </a-breadcrumb>
</template>

<script lang="ts">
  import { defineComponent } from "vue";

  export default defineComponent({
    data() {
      return{}; }});</script>

<style></style>
Copy the code

Modify the layout/index.vue file

<template>
  <a-layout style="min-height: 100vh">
    <Sider />
    <a-layout>
      <header />
      <main />
      <footer />
    </a-layout>
  </a-layout>
</template>

<script lang="ts">
  import { defineComponent } from "vue";

  import Sider from "./sider/index.vue";
  import Header from "./header/index.vue";
  import Main from "./main/index.vue";
  import Footer from "./footer/index.vue";

  export default defineComponent({
    components: {
      Sider,
      Header,
      Footer,
      Main,
    },
    data() {
      return{}; }});</script>

<style></style>
Copy the code