Ant Design Vue UI框架的基础使用,及通用后台管理模板的小demo【简单】

一、创建 VUE 项目

npm create vue@latest

二、安装使用 ant-design-vue

  1. 安装脚手架工具
$ npm install -g @vue/cli
# OR
$ yarn global add @vue/cli
  1. 使用组件
# 安装
$ npm i --save ant-design-vue@4.x
  1. 全局完整注册
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');

tips :使用方式基本与element-ui一致,不过确实好看很多和省事儿,都有现成的组件,拿过来改改就行

三、后台管理通用页面的demo

1. 代码部分

<template><a-layout style="min-height: 100vh;min-width: 100vw;"><!-- 左侧 侧边栏 --><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>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"><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><!-- 内容区域 --><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><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></a-layout-content><!-- 页脚区域 --><a-layout-footer style="text-align: center;background-color: #ccc;">Ant Design @2023 Changed by Robin</a-layout-footer></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';
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>

2. 页面显示

在这里插入图片描述

在这里插入图片描述

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

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

相关文章

Nokogiri库和OpenURI库使用HTTP做一个爬虫

Nokogiri和OpenURI是两个常用的Ruby库&#xff0c;用于编写爬虫程序。它们的主要功能如下&#xff1a; 1、Nokogiri&#xff1a;Nokogiri是一个强大的HTML和XML解析库&#xff0c;可以用于解析网页内容。它提供了一组简单易用的API&#xff0c;可以方便地遍历和操作HTML或XML文…

MySQL篇---第五篇

系列文章目录 文章目录 系列文章目录一、分库分表之后,id 主键如何处理?二、 说说在 MySQL 中一条查询 SQL 是如何执行的?三、索引有什么优缺点?一、分库分表之后,id 主键如何处理? 因为要是分成多个表之后,每个表都是从 1 开始累加,这样是不对的,我们需要一个全局唯一…

IOC课程整理-17 Spring事件

1. Java 事件/监听器编程模型 2. 面向接口的事件/监听器设计模式 3. 面向注解的事件/监听器设计模式 4. Spring 标准事件-ApplicationEvent 5. 基于接口的 Spring 事件监听器 6. 基于注解的 Spring 事件监听器 7. 注册 Spring ApplicationListener 8. Spring 事件发布器 9. Spr…

基于VectorGrid加载GeoServer发布的矢量瓦片实例

目录 前言 一、关于VectorGrid 1、开源地址 2、本地示例 二、与LeafLet集成 1、新建html页面 2、地图初始化 3、pbf瓦片地址配置 4、pbf初始化 三、GeoServer跨域问题 1、web.xml配置 2、重启tomcat 总结 前言 回望10月&#xff0c;发生了一些变动&#xff0c;面向未…

LeetCode--196. 删除重复的电子邮箱

文章目录 1 题目描述2 解题思路2.1 代码实现 1 题目描述 表: Person ---------------------- | Column Name | Type | ---------------------- | id | int | | email | varchar | ----------------------id 是该表的主键列(具有唯一值的列)。 该表的每…

OpenCV官方教程中文版 —— Hough 直线变换

OpenCV官方教程中文版 —— Hough 直线变换 前言一、原理二、OpenCV 中的霍夫变换三、Probabilistic Hough Transform 前言 目标 • 理解霍夫变换的概念 • 学习如何在一张图片中检测直线 • 学习函数&#xff1a;cv2.HoughLines()&#xff0c;cv2.HoughLinesP() 一、原理…

贪心算法总结(未完结)

贪心的定义&#xff08;摘自百度百科&#xff09; 贪心算法&#xff08;greedy algorithm&#xff0c;又称贪婪算法&#xff09;是指&#xff0c;在对问题求解时&#xff0c;总是做出在当前看来是最好的选择。也就是说&#xff0c;不从整体最优上加以考虑&#xff0c;算法得到的…

Hive常用DDL操作

本专栏案例数据集链接: https://download.csdn.net/download/shangjg03/88478038 1. Database 1.1 查看数据库列表 show databases; 1.2 使用数据库 USE database_name;

设计模式(2)-创建型模式

1&#xff0c;创建型模式 4.1 单例设计模式 单例模式&#xff08;Singleton Pattern&#xff09;是 Java 中最简单的设计模式之一。这种类型的设计模式属于创建型模式&#xff0c;它提供了一种创建对象的最佳方式。 这种模式涉及到一个单一的类&#xff0c;该类负责创建自己…

有所期待的日子,就是幸福的。

打开了手机屏幕&#xff0c;开始码字&#xff0c;手指敲打出文字的霎那&#xff0c;像是高中时期最后一节晚自习时抬起的笔&#xff0c;在厚厚的日记本上&#xff0c;写下一段时间的感受。文字是有力量的&#xff0c;我从来都相信。 大三那年&#xff0c;我总是会习惯而又阶段…

初次学习dubbo记录

---------------------------------------10.17---------------------------------------- 集群和分布式概念 集群&#xff1a;很多"人"做的相同的一件事&#xff0c;即使有一个人挂掉了&#xff0c;也不会对系统造成致命影响 分布式&#xff1a;很多"人"…

ruoyi vue前后端分离功能介绍

文章目录 内置功能:用户管理&#xff1a;部门管理&#xff1a;岗位管理&#xff1a;菜单管理&#xff1a;角色管理&#xff1a;字典管理&#xff1a;参数管理&#xff1a; 可以设置是否开启验证码功能通知公告&#xff1a;操作日志&#xff1a;登录日志&#xff1a;在线用户&am…

Think-Queue3一直提示[Exception]redis扩展未安装

场景 tp6tq3实现的任务队列&#xff0c;使用redis作为数据驱动&#xff0c;目前是tp6可以正常使用redis了&#xff0c;但tq3不行&#xff0c;一直提示[Exception]redis扩展未安装。 解决思路 1.分析tq3源码 定位到是这一行出了问题 if (!extension_loaded(redis)) {throw n…

PAT 乙级1070结绳

题目&#xff1a; 给定一段一段的绳子&#xff0c;你需要把它们串成一条绳。每次串连的时候&#xff0c;是把两段绳子对折&#xff0c;再如下图所示套接在一起。这样得到的绳子又被当成是另一段绳子&#xff0c;可以再次对折去跟另一段绳子串连。每次串连后&#xff0c;原来两…

【ChatGPT系列】ChatGPT:创新工具还是失业威胁?

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kuan 的首页,持续学…

香港服务器如何做负载均衡?

​  在现代互联网时代&#xff0c;随着网站访问量的不断增加&#xff0c;服务器的负载也越来越重。为了提高网站的性能和可用性&#xff0c;负载均衡成为了一种常见的解决方案。 什么是负载均衡? 负载均衡是一种技术解决方案&#xff0c;用于在多个服务器之间分配负载&#…

【C】想练习C语言?通讯录的实现了解一下

目录 实现思路 开始实现 添加增加联系人功能 添加显示联系人信息的功能 添加删除联系人功能 添加查找指定联系人的功能 添加修改指定联系人的功能 测试 代码 Test.c Contact.c Contact.h 实现思路 1.通讯录中保存人的信息&#xff1a;名字、年龄、性别、电话、住址…

音视频常见问题(六):视频黑边或放大

摘要 本文介绍了视频黑边或放大的原因和解决方案。主要原因包括视频分辨率与显示视图尺寸不一致、摄像头采集、美颜滤镜格式兼容和分辨率。为了解决这些问题&#xff0c;开发者可以选择合适的渲染模式、动态调整分辨率、处理视频旋转和使用自定义视频渲染。 即构音视频SDK提供…

每日一道算法题:26. 删除有序数组中的重复项

难度 简单 题目 给你一个 非严格递增排列 的数组 nums &#xff0c;请你原地 删除重复出现的元素&#xff0c;使每个元素 只出现一次 &#xff0c;返回删除后数组的新长度。元素的 相对顺序 应该保持 一致 。然后返回 nums 中唯一元素的个数。 考虑 nums 的唯一元素的数量为…

Winform 多语言化快速解析替换工具-1分钟一个界面

随着业务的扩展&#xff0c;有的软件有多语言化的需求。那么如果软件已经很多写死的文字内容如何快速进行语言化替换呢&#xff0c;一个一个去改工作量太大。 于是开发了个小工具用来替换现有内容并生成语音包&#xff0c;原理就是采用正则表达式进行匹配控件关键字以及中文进…