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