当前位置：首页 > article >正文

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

article 2025/3/17 11:12:54

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文件内容自定义如下：