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

<template>页面内容</template>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/34073.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

链表·简单归并

cur->next la; //将 p指针所指向的链表节点的 next 指针&#xff08;也就是 p 节点的下一个节点的指针&#xff09;指向 l1 所指向的链表节点。简单来说&#xff0c;就是把 la 节点连接到 p 节点的后面&#xff0c;更新了链表的连接关系。 p la; //将p指针的值更新为 la …

kmp报错→Cannot find skiko-windows-x64.dll.sha256

1、前言 学习kmp&#xff08;Kotlin MultiPlatform简称&#xff09;过程中报了错误&#xff0c;这个报错在直接运行desktop的main方法才会出现&#xff0c;用gradle运行却不会报错&#xff0c;新建的kmp项目也不会出现&#xff0c;我学习的写了一些代码的项目才会出现。   运…

MySQL(事物下)

目录 一 多版本并发控制&#xff08; MVCC &#xff09;是一种用来解决 读-写冲突 的无锁并发控制 1. 前置知识 示例&#xff1a; 二 Read View 1. 当事物进行快照读(读历史数据)会MySQL会创建一个Read Vidw类对象&#xff0c;用来记录和当前一起并发的事物(活跃的事物)&a…

星型组网模块的两种交互方式优缺点解析

星型组网模块简介 星型组网模块工作在433MHz频段&#xff1b;星型组网模块集主机&#xff08;协调器&#xff09;、终端为一体&#xff0c;星型组网模块具有长距离、高速率两种传输模式&#xff0c;一个主机&#xff08;协调器&#xff09;支持多达200个节点与其通讯&#xff0…

IMX6ULL学习整理篇——UBoot的一些基础知识(1.编译流程)

前言 笔者整理了最近刷IMX6ULL的一些学习笔记&#xff0c;这里打算稍微整理一下东西发上来作为作为一个补充 正文 大部分而言&#xff0c;当我们拿到源码的时候&#xff0c;一般都是——先使用make来生成一份针对我们目标开发板的配置。举个例子&#xff0c;正点原子针对他们…

docker桌面版启动redis,解决无法连接

docker run -d --name redis -p 6379:6379 -v E:\2\redis\redis.conf:/usr/local/etc/redis/redis.conf redis redis-server /usr/local/etc/redis/redis.conf 在本地创建一个目录&#xff0c;里面有个redis.conf文件&#xff0c;内容如下&#xff0c;启动时绑定这个配置文件目…

2025-03-15 学习记录--C/C++-PTA 习题3-3 出租车计价

合抱之木&#xff0c;生于毫末&#xff1b;九层之台&#xff0c;起于累土&#xff1b;千里之行&#xff0c;始于足下。&#x1f4aa;&#x1f3fb; 一、题目描述 ⭐️ 习题3-3 出租车计价 本题要求根据某城市普通出租车收费标准编写程序进行车费计算。具体标准如下&#xff1…

《C++ Primer》学习笔记(二)

第二部分&#xff1a;C标准库 1.为了支持不同种类的IO处理操作&#xff0c;标准库定义了以下类型的IO&#xff0c;分别定义在三个独立的文件中&#xff1a;iostream文件中定义了用于读写流的基本类型&#xff1b;fstream文件中定义了读写命名文件的类型&#xff1b;sstream文件…

数据类设计_图片类设计之6_混合图形类设计(前端架构)

前言 学的东西多了,要想办法用出来.C和C是偏向底层的语言,直接与数据打交道.尝试做一些和数据方面相关的内容 引入 接续上一篇,讨论混合图形类设计 方法论-现在能做什么 这段属于聊天内容---有句话是这么说的&#xff1a;不要只埋头拉车&#xff0c;还要抬头看路。写代码也是…

招聘信息|基于SprinBoot+vue的招聘信息管理系统(源码+数据库+文档)

招聘信息管理系统 目录 基于SprinBootvue的招聘信息管理系统 一、前言 二、系统设计 三、系统功能设计 5.1系统功能模块 5.2管理员功能模块 5.3企业后台管理模块 5.4用户后台管理模块 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、…

【软件】免费的PDF全文翻译软件,能保留公式图表的样式

转载请注明出处&#xff1a;小锋学长生活大爆炸[xfxuezhagn.cn] 如果本文帮助到了你&#xff0c;欢迎[点赞、收藏、关注]哦~ 很多PDF全文翻译软件都是收费的&#xff0c;而划线翻译看着又很累。这个开源的PDF全文翻译软件非常好用&#xff0c;并且能够保留公式、图表、目录和注…

79.HarmonyOS NEXT 手势操作模型详解:移动、缩放与旋转的实现原理

温馨提示&#xff1a;本篇博客的详细代码已发布到 git : https://gitcode.com/nutpi/HarmonyosNext 可以下载运行哦&#xff01; HarmonyOS NEXT 手势操作模型详解&#xff1a;移动、缩放与旋转的实现原理 文章目录 HarmonyOS NEXT 手势操作模型详解&#xff1a;移动、缩放与旋…

解读Ant Design X API流式响应和流式渲染的原理

前言 AI是未来世界的趋势&#xff0c;deepseek的出现让在国内构建更多的大模型出现了更多的可能。而从前端出发&#xff0c;Ant design团队最近很有意思&#xff0c;基于这个背景&#xff0c;提供了一套面向构建平台化产品的组件。 本篇结合Ant design AI的XSteam、XRequesta…

CentOS 7 64 安装 Docker

前言 在虚拟机中安装 Docker 是一种常见的测试和开发环境搭建方式。通过在虚拟机上安装 Docker&#xff0c;可以方便地创建和管理容器化应用&#xff0c;同时避免对宿主机系统造成影响。以下是在 CentOS 7 虚拟机中安装 Docker 的详细步骤。 1. 更新系统&#xff08;可以不操作…

SPI驱动(八) -- SPI_DAC设备驱动程序

文章目录 参考资料&#xff1a;一、编写设备树二、 编写驱动程序三、编写测试APP四、Makefile五、上机实验 参考资料&#xff1a; 参考资料&#xff1a; 内核头文件&#xff1a;include\linux\spi\spi.h内核文档&#xff1a;Documentation\spi\spidevDAC芯片手册&#xff1a;…

Ansible 自动化运维

Ansible架构: 一.部署主机清单 前期环境准备: 管理端: 192.168.60.128 被管理端: client1:192.168.60.129 client2:192.168.60.131 1.所有被管理端配置ssh密钥 (1.免密登陆 2.允许root远程登陆) 脚本如下: #!/bin/bash# 检查 sshpass 是否已安装 if ! command -v ss…

Qt 实现波浪填充的圆形进度显示

话不多说&#xff0c;先上效果图 代码示例&#xff1a; #include <QApplication> #include <QWidget> #include <QPainter> #include <QPropertyAnimation> #include <QTimer> #include <cmath>class WaveProgressBar : public QWidget {…

DQN 玩 2048 实战|第一期!搭建游戏环境(附 PyGame 可视化源码)

视频讲解&#xff1a; DQN 玩 2048 实战&#xff5c;第一期&#xff01;搭建游戏环境&#xff08;附 PyGame 可视化源码&#xff09; 代码仓库&#xff1a;GitHub - LitchiCheng/DRL-learning: 深度强化学习 2048游戏介绍&#xff0c;引用维基百科 《2048》在44的网格上进行。…

星越L_外后视镜使用讲解

目录 1.外后视镜调节 2后视镜折叠 3.后视镜加热 1.外后视镜调节 L控制左边后视镜调节,上下拨动调整视野,一般此镜左右21分,上下55开。 R控制左边后视镜调节,上下拨动调整视野,一般此镜左右13分,上下55开。 2后视镜折叠 车辆解锁自动展开 车辆关闭自动折叠 严寒天气…

2025-03-15 Python深度学习2——Numpy库

文章目录 1 基础1.1 数据类型1.1.1 整型数组与浮点型数组1.1.2 元素同化1.1.3 数组类型转换 1.2 数组维度1.2.1 一维数组与二维数组1.2.2 数组形状变换 2 创建数组2.1 创建指定数组2.2 创建递增数组2.3 创建同值数组2.4 创建随机数组 3 索引3.1 访问数组元素3.1.1 访问向量3.1.…