Ant Design Vue UI框架快速打造后台管理管理案例

1、安装vue类声明

 npm install @types/vue

2、安装脚手架工具

$ npm install -g @vue/cli

3、安装使用组件

# 安装
$ npm i --save ant-design-vue@4.x

4、全局注册，修改main.ts，注意和app.vue路径

import { createApp } from 'vue';
import Antd from 'ant-design-vue';
import App from './App';
import 'ant-design-vue/dist/reset.css';const app = createApp(App);app.use(Antd).mount('#app');

5、创建app.vue加入以下代码

<template><a-layout style="min-height: 100vh;min-width: 100vw;"><!-- 左侧 侧边栏 --><SideMenu/><!-- 右侧 主体内容区域分为三部分 --><a-layout><!-- 顶部区域 --><Head/><!-- 内容区域 --><a-layout-content style="margin: 0 16px"><router-view></router-view></a-layout-content><!-- 页脚区域 --><Foot/></a-layout></a-layout>
</template>
<script lang="ts" setup>
import {PieChartOutlined,DesktopOutlined,UserOutlined,TeamOutlined,FileOutlined,SmileOutlined,DownOutlined
} from '@ant-design/icons-vue';
import { ref } from 'vue';
import Foot from "@/components/Foot.vue";
import SideMenu from "@/components/SideMenu.vue";
import Head from "@/components/Head.vue";
const collapsed = ref<boolean>(false);
const selectedKeys = ref<string[]>(['1']);const data = ref([{key: '1',name: 'John Brown',age: 32,address: 'New York No. 1 Lake Park',tags: ['nice', 'developer'],
},{key: '2',name: 'Jim Green',age: 42,address: 'London No. 1 Lake Park',tags: ['loser'],},{key: '3',name: 'Joe Black',age: 32,address: 'Sidney No. 1 Lake Park',tags: ['cool', 'teacher'],},])
const columns = ref([{name: 'Name',dataIndex: 'name',key: 'name',
},{title: 'Age',dataIndex: 'age',key: 'age',},{title: 'Address',dataIndex: 'address',key: 'address',},{title: 'Tags',key: 'tags',dataIndex: 'tags',},{title: 'Action',key: 'action',},])
</script>
<style scoped>
#components-layout-demo-side .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;
}
</style>

6、创建文件夹compents，添加底部文件Foot.vue

<template><a-layout-footer style="text-align: center;background-color: #ccc;">xinglei @2025 Changed by xinglei</a-layout-footer>
</template>

7、再添加头部文件Head.vue

<template><a-layout-header style="background: #fff; padding: 0"><div style="display: flex;float: right;margin-right: 40px;"><!-- 登录用户描述性文字--><span style="margin-right: 15px;">欢迎:xxxx</span><!-- 用户点击下拉 --><a-dropdown><a-avatar size="normal" style="margin-top: 15px;"><!-- 实际使用时，src绑定实际用户头像即可 --><template #icon><UserOutlined /></template></a-avatar><template #overlay><a-menu><a-menu-item><a href="javascript:;">注销</a></a-menu-item><a-menu-item><a href="javascript:;">切换账号</a></a-menu-item><a-menu-item><a href="javascript:;">修改密码</a></a-menu-item></a-menu></template></a-dropdown></div></a-layout-header>
</template>

8、再添加菜单组件SideMenu.vue

<template>
<a-layout-sider v-model:collapsed="collapsed" collapsible>
<div class="logo" />
<a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline"><a-menu-item key="1"><pie-chart-outlined /><span><router-link to="home">home</router-link></span></a-menu-item><a-menu-item key="2"><desktop-outlined /><span><router-link to="one">one</router-link></span></a-menu-item><a-menu-item key="3"><desktop-outlined /><span><router-link to="two">two</router-link></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>

9、在根目录添加vite.config.ts配置文件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// *********************************** 路径配置新增 start
import { resolve } from 'path'const pathResolve = (dir: string): any => {return resolve(__dirname, ".", dir)
}const alias: Record<string, string> = {'@': pathResolve("src")
}
// https://vitejs.dev/config/
export default defineConfig({plugins: [vue()],resolve: {  // ****************** 路径配置新增alias     // ****************** 路径配置新增}           // ****************** 路径配置新增
})

10、修改tsconfig.json在compilerOptions内部添加

 "baseUrl": ".","paths": {"@/*": ["src/*"],

11、创建路由配置文件夹routes下index.ts

import { createRouter, createWebHistory } from "vue-router";
const router = createRouter({history: createWebHistory(),routes: [{path: '/',name: 'index',component: () => import('@/views/index.vue')},{path: '/home',name: 'home',component: () => import('@/views/home.vue')},{path: '/one',name: 'one',component: () => import('@/views/one.vue')},{path: '/two',name: 'two',component: () => import('@/views/two.vue')}]
})
// 导出
export default router

12、创建文件夹views页面home.vue

<template><!-- 面包屑导航 --><a-breadcrumb style="margin: 16px 0"><a-breadcrumb-item>User</a-breadcrumb-item><a-breadcrumb-item>Bill</a-breadcrumb-item></a-breadcrumb><a-card style="width: 100%;"><a-table :columns="columns" :data-source="data"><template #headerCell="{ column }"><template v-if="column.key === 'name'"><span><smile-outlined />Name</span></template></template><template #bodyCell="{ column, record }"><template v-if="column.key === 'name'"><a>{{ record.name }}</a></template><template v-else-if="column.key === 'tags'"><span><a-tag v-for="tag in record.tags" :key="tag":color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'">{{ tag.toUpperCase() }}</a-tag></span></template><template v-else-if="column.key === 'action'"><span><a>Invite 一 {{ record.name }}</a><a-divider type="vertical" /><a>Delete</a><a-divider type="vertical" /><a class="ant-dropdown-link">More actions<down-outlined /></a></span></template></template></a-table></a-card>
</template>

13、分别添加index.vue文件，one.vue文件,two.vue文件内容自定义如下：