当前位置: 首页 > 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接口有着一个很大的优势就是可以有更高的电压&…...

第19节 Node.js Express 框架

Express 是一个为Node.js设计的web开发框架&#xff0c;它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用&#xff0c;和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...

Golang 面试经典题:map 的 key 可以是什么类型?哪些不可以?

Golang 面试经典题&#xff1a;map 的 key 可以是什么类型&#xff1f;哪些不可以&#xff1f; 在 Golang 的面试中&#xff0c;map 类型的使用是一个常见的考点&#xff0c;其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...

理解 MCP 工作流:使用 Ollama 和 LangChain 构建本地 MCP 客户端

&#x1f31f; 什么是 MCP&#xff1f; 模型控制协议 (MCP) 是一种创新的协议&#xff0c;旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议&#xff0c;它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...

多模态商品数据接口:融合图像、语音与文字的下一代商品详情体验

一、多模态商品数据接口的技术架构 &#xff08;一&#xff09;多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如&#xff0c;当用户上传一张“蓝色连衣裙”的图片时&#xff0c;接口可自动提取图像中的颜色&#xff08;RGB值&…...

镜像里切换为普通用户

如果你登录远程虚拟机默认就是 root 用户&#xff0c;但你不希望用 root 权限运行 ns-3&#xff08;这是对的&#xff0c;ns3 工具会拒绝 root&#xff09;&#xff0c;你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案&#xff1a;创建非 roo…...

MODBUS TCP转CANopen 技术赋能高效协同作业

在现代工业自动化领域&#xff0c;MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步&#xff0c;这两种通讯协议也正在被逐步融合&#xff0c;形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...

涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战

“&#x1f916;手搓TuyaAI语音指令 &#x1f60d;秒变表情包大师&#xff0c;让萌系Otto机器人&#x1f525;玩出智能新花样&#xff01;开整&#xff01;” &#x1f916; Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制&#xff08;TuyaAI…...

EtherNet/IP转DeviceNet协议网关详解

一&#xff0c;设备主要功能 疆鸿智能JH-DVN-EIP本产品是自主研发的一款EtherNet/IP从站功能的通讯网关。该产品主要功能是连接DeviceNet总线和EtherNet/IP网络&#xff0c;本网关连接到EtherNet/IP总线中做为从站使用&#xff0c;连接到DeviceNet总线中做为从站使用。 在自动…...

多模态大语言模型arxiv论文略读(108)

CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题&#xff1a;CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者&#xff1a;Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...

【Oracle】分区表

个人主页&#xff1a;Guiat 归属专栏&#xff1a;Oracle 文章目录 1. 分区表基础概述1.1 分区表的概念与优势1.2 分区类型概览1.3 分区表的工作原理 2. 范围分区 (RANGE Partitioning)2.1 基础范围分区2.1.1 按日期范围分区2.1.2 按数值范围分区 2.2 间隔分区 (INTERVAL Partit…...