当前位置: 首页 > news >正文

【Vue3】集成 Ant Design Vue

【Vue3】集成 Ant Design Vue

  • 背景
  • 简介
  • 开发环境
  • 开发步骤及源码
  • 总结

背景

随着年龄的增长,很多曾经烂熟于心的技术原理已被岁月摩擦得愈发模糊起来,技术出身的人总是很难放下一些执念,遂将这些知识整理成文,以纪念曾经努力学习奋斗的日子。本文内容并非完全原创,大多是参考其他文章资料整理所得,感谢每位技术人的开源精神。

简介

本文介绍 Vue3 集成 Ant Design Vue 的方法步骤。

Ant Design 是蚂蚁集团和 Ant Design 开源社区推出的一套基于 React 的 UI 设计语言和组件库,适用于企业级中后台产品。Ant Design Vue 是基于 Ant Design 和 Vue 技术栈的实现。

开发环境

分类名称版本
操作系统WindowsWindows 11
IDEVisual Studio Code1.91.1

开发步骤及源码

1> 创建 Vue3 工程,参考:【Vue3】工程创建及目录说明。

2> 删除 src 目录下的 assetscomponents 目录。

3> 执行命令 npm install ant-design-vue@4.x --save 安装 Ant Design Vue。

4> 修改 src/main.ts,完整引入 Ant Design Vue。

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

5> 修改 src/App.vue,使用 Ant Design Vue 组件。

<template><div class="container"><a-space wrap><a-button type="primary">Primary Button</a-button><a-button>Default Button</a-button><a-button type="dashed">Dashed Button</a-button><a-button type="text">Text Button</a-button><a-button type="link">Link Button</a-button></a-space></div>
</template><script setup lang="ts">
</script><style scoped>
</style>

6> 执行命令 npm run dev 启动应用,浏览器访问 http://localhost:5173/
在这里插入图片描述

总结

本文只介绍了全局完整注册 Ant Design Vue 的方法,适用于对打包文件大小不敏感的场景,除此外还可以全局部分注册和局部注册组件,参考 官方文档。

相关文章:

【Vue3】集成 Ant Design Vue

【Vue3】集成 Ant Design Vue 背景简介开发环境开发步骤及源码总结 背景 随着年龄的增长&#xff0c;很多曾经烂熟于心的技术原理已被岁月摩擦得愈发模糊起来&#xff0c;技术出身的人总是很难放下一些执念&#xff0c;遂将这些知识整理成文&#xff0c;以纪念曾经努力学习奋斗…...

如何处理前端项目中的SEO优化:从SPA到SSR与SSG

如何处理前端项目中的SEO优化&#xff1a;从SPA到SSR与SSG 在前端开发的日常工作中&#xff0c;你可能经常会遇到这样的情况&#xff1a;辛辛苦苦写了一个功能丰富、界面炫酷的单页应用&#xff08;SPA&#xff09;&#xff0c;但上线后发现搜索引擎的表现却不尽如人意。页面内…...

【UE5】Groom毛发系统的基本使用——给小白人添加头发

目录 效果 步骤 一、准备 二、使用3DsMax制作毛发 三、在UE中给小白人安装毛发 四、修改毛发材质 效果 步骤 一、准备 1. 新建一个第三人称模板工程 2. 在项目设置中&#xff0c;勾选“支持计算蒙皮缓存” 3. 在插件面板中&#xff0c;启用“Groom”和“Alembic Gro…...

DataWorks函数

文章目录 0、MaxCompute预置的函数分类1、日期函数2、数学函数3、算术运算符4、窗口函数5、聚合函数6、字符串函数7、复杂类型函数8、加密函数9、其他函数 0、MaxCompute预置的函数分类 函数类型说明日期函数支持处理DATE、DATETIME、TIMESTAMP等日期类型数据&#xff0c;实现…...

设计模式学习优质网站分享:refactoring.guru

地址 英文版地址&#xff1a;https://refactoring.guru/design-patterns 中文版地址&#xff1a;https://refactoringguru.cn/design-patterns 介绍 这个网站是专门学习 设计模式 和 软件重构 的网站 整体来说并不花哨&#xff0c;但我觉得他最大的优点就是&#xff1a; 概…...

JVM-Java的四种引用

引用分析 无论是通过引用计数算法判断对象的引用数量&#xff0c;还是通过可达性分析算法判断对象是否可达&#xff0c;判定对象是否可被回收都与引用有关&#xff0c;Java 提供了四种强度不同的引用类型 强引用&#xff1a; 被强引用关联的对象不会被回收&#xff0c;只有所…...

探索《黑神话:悟空》品质保障的背后:ISO体系认证

《黑神话&#xff1a;悟空》横空出世 8月20日上午10点&#xff0c;国产首款大型3A游戏《黑神话&#xff1a;悟空》正式上线。游戏一经上线便吸引了无数国内外用户的关注&#xff0c;不仅仅是因为其高超的游戏制作技术&#xff0c;极高的画面精度&#xff0c;精良的的视觉和战斗…...

ArcGIS Pro 实现人口分布栅格TIFF数据的网格提取与可视化

这里在分享一个人口1km精度栅格数据&#xff0c;LandScan是由美国能源部橡树岭国家实验室&#xff08;ORNL&#xff09;提供的全球人口分布数据集&#xff0c;具有最高分辨率的全球人口分布数据&#xff0c;是全球人口数据发布的社会标准&#xff0c;是全球最为准确、可靠&…...

select的缺点;poll ;poll的缺点;epoll

1.select的缺点&#xff1a; 1.select监听的文件描述符集合是一个数组&#xff0c;有上限&#xff08;1024个&#xff09; 2.select监听的文件描述符集合在应用层&#xff0c;内核层监听事件后需要传递给用户层带来资源开销 3.select需要用户手动查找产生事件的文件…...

keli5_报错 Cannot Load Device Description问题

1原因 之前创建的keli5的项目软件版本与当前的软件版本不同 使其算法要重新选择 2解决方法 2-1 点击图中的魔术棒 2-2 在这个界面中进入 Settings选项&#xff08;ST-Link Debugger 旁边&#xff09; 2-3 点击Flash Download 选项进入图中界面 在点击天加 2-4选择fla…...

算法的学习笔记—把二叉树打印成多行(牛客JZ78)

&#x1f600;前言 在算法面试中&#xff0c;二叉树的层序遍历是一个经典的题目。而这道题的要求是进一步将二叉树的每一层结点值打印成多行&#xff0c;即同一层结点从左至右输出&#xff0c;最终结果存放到一个二维数组中返回。接下来&#xff0c;我们将通过代码实例详细解析…...

FreeRTOS 时间管理

延时函数介绍 函数 描述 vTaskDelay() 相对延时 xTaskDelayUntil() 绝对延时 相对延时&#xff1a;指每次延时都是从执行函数vTaskDelay()开始&#xff0c;直到延时指定的时间结束 绝对延时&#xff1a;指将整个任务的运行周期看成一个整体&#xff0c;适用于需要按…...

F. Valuable Cards D. Smithing Skill

D题 F题 F题&#xff1a; 因为是连续的且都要选&#xff0c;我们直接从左到右去取每个区间到不合法的情况即可&#xff0c;可以在n1的位置添加一个x来结束区间判断。因为是要乘积为x&#xff0c;那么我们只需要放x的因子进去&#xff0c;不然会超时&#xff0c;同时也可以用v…...

【电子通识】IPC-A-600中对验收标准的定义

在文章【电子通识】IPC-A-610标准对产品的四种验收条件都是什么意思&#xff1f;中我们讲到IPC-A-610标准&#xff08;电子组件的可接受性&#xff09;对于产品的四种验收条件。本文中我们同理讲一讲IPC-A-600中对验收标准的定义。 IPC-A-600文件中的多数示意图和照片同时表示每…...

MyBatis(初阶)

1.什么是MyBtis MyBatis是持久层框架&#xff0c;⽤于简化JDBC的开发。 2.准备工作 2.1 创建⼯程 数据库: 2.2 配置数据库连接字符串 以application.yml⽂件为例: 2.3 写持久层代码 Data public class UserInfo {private Integer id;private String username;private Stri…...

KDP数据平台:以实战案例验证技术领先力

本文由智领云 LeetTools 工具自动生成 申请试用&#xff1a; https://www.leettools.com/feedback/ 在当今快速发展的技术环境中&#xff0c;数据平台的选择对企业的数字化转型和业务发展至关重要。智领云开源KDP&#xff08;Kubernetes Data Platform&#xff09;在数据处理和…...

[Linux] 什么是 Shell?

一、什么是 shell ? shell在英语中的意思就是外壳&#xff0c;所以我们习惯称shell程序为壳程序。那为什么又会被叫做壳程序呢&#xff1f;那是因为shell程序是在内核上面的&#xff0c;属于操作系统的外壳部分&#xff0c;因此我们就称之为壳程序(shell)。 在 Linux 中&#…...

大模型学习应用 2:快速上手大模型基于langchain实现RAG检索应用

快速上手大模型基于langchain实现RAG检索应用 - 项目作业 目录 准备工作镜像选择算力选择安装包数据说明提示参考链接 Task1 申请 api 后&#xff0c;使用 langchain 导入大模型&#xff0c;并打印出大模型信息Task2 使用 langchian 加载数据&#xff0c;并把数据打印出来Task…...

python环境安装之后,cmd输入python回车会打开微软商店

坑爹&#xff01;python环境安装之后&#xff0c;cmd输入python回车会打开微软商店 最近发现&#xff0c;安装python环境成功之后&#xff0c;可能会出现cmd输入python验证是否安装成功老会打开微软商店&#xff01; 解决&#xff0c;打开系统环境配置&#xff0c;找到刚安装…...

USB Type-C如何取9V、12V、15V、20V电压-PD快充协议芯片ECP5701

相信大家在生活中也发现了&#xff0c;现在越来越多的设备都改用这种type-C接口的母座进行取电了。 因为欧盟决议 &#xff1a;自2024年起部分消费电子产品必须提供单一的USB-C充电接口。 那么这种type-C接口相比之前的Micro-B接口有着一个很大的优势就是可以有更高的电压&…...

在rocky linux 9.5上在线安装 docker

前面是指南&#xff0c;后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...

Qt Widget类解析与代码注释

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码&#xff0c;写上注释 当然可以&#xff01;这段代码是 Qt …...

HTML 列表、表格、表单

1 列表标签 作用&#xff1a;布局内容排列整齐的区域 列表分类&#xff1a;无序列表、有序列表、定义列表。 例如&#xff1a; 1.1 无序列表 标签&#xff1a;ul 嵌套 li&#xff0c;ul是无序列表&#xff0c;li是列表条目。 注意事项&#xff1a; ul 标签里面只能包裹 li…...

Auto-Coder使用GPT-4o完成:在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务

通过akshare库&#xff0c;获取股票数据&#xff0c;并生成TabPFN这个模型 可以识别、处理的格式&#xff0c;写一个完整的预处理示例&#xff0c;并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务&#xff0c;进行预测并输…...

微服务商城-商品微服务

数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...

html-<abbr> 缩写或首字母缩略词

定义与作用 <abbr> 标签用于表示缩写或首字母缩略词&#xff0c;它可以帮助用户更好地理解缩写的含义&#xff0c;尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时&#xff0c;会显示一个提示框。 示例&#x…...

关键领域软件测试的突围之路:如何破解安全与效率的平衡难题

在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件&#xff0c;这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下&#xff0c;实现高效测试与快速迭代&#xff1f;这一命题正考验着…...

SAP学习笔记 - 开发26 - 前端Fiori开发 OData V2 和 V4 的差异 (Deepseek整理)

上一章用到了V2 的概念&#xff0c;其实 Fiori当中还有 V4&#xff0c;咱们这一章来总结一下 V2 和 V4。 SAP学习笔记 - 开发25 - 前端Fiori开发 Remote OData Service(使用远端Odata服务)&#xff0c;代理中间件&#xff08;ui5-middleware-simpleproxy&#xff09;-CSDN博客…...

HDFS分布式存储 zookeeper

hadoop介绍 狭义上hadoop是指apache的一款开源软件 用java语言实现开源框架&#xff0c;允许使用简单的变成模型跨计算机对大型集群进行分布式处理&#xff08;1.海量的数据存储 2.海量数据的计算&#xff09;Hadoop核心组件 hdfs&#xff08;分布式文件存储系统&#xff09;&a…...

在Ubuntu24上采用Wine打开SourceInsight

1. 安装wine sudo apt install wine 2. 安装32位库支持,SourceInsight是32位程序 sudo dpkg --add-architecture i386 sudo apt update sudo apt install wine32:i386 3. 验证安装 wine --version 4. 安装必要的字体和库(解决显示问题) sudo apt install fonts-wqy…...