做网站需要考虑什么,网站免费正能量链接,企业网站建设费用大约多少钱,东莞诚信通代运营【Vue3】集成 Ant Design Vue 背景简介开发环境开发步骤及源码总结 背景
随着年龄的增长#xff0c;很多曾经烂熟于心的技术原理已被岁月摩擦得愈发模糊起来#xff0c;技术出身的人总是很难放下一些执念#xff0c;遂将这些知识整理成文#xff0c;以纪念曾经努力学习奋斗… 【Vue3】集成 Ant Design Vue 背景简介开发环境开发步骤及源码总结 背景
随着年龄的增长很多曾经烂熟于心的技术原理已被岁月摩擦得愈发模糊起来技术出身的人总是很难放下一些执念遂将这些知识整理成文以纪念曾经努力学习奋斗的日子。本文内容并非完全原创大多是参考其他文章资料整理所得感谢每位技术人的开源精神。
简介
本文介绍 Vue3 集成 Ant Design Vue 的方法步骤。
Ant Design 是蚂蚁集团和 Ant Design 开源社区推出的一套基于 React 的 UI 设计语言和组件库适用于企业级中后台产品。Ant Design Vue 是基于 Ant Design 和 Vue 技术栈的实现。
开发环境
分类名称版本操作系统WindowsWindows 11IDEVisual Studio Code1.91.1
开发步骤及源码
1 创建 Vue3 工程参考【Vue3】工程创建及目录说明。
2 删除 src 目录下的 assets 和 components 目录。
3 执行命令 npm install ant-design-vue4.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.csscreateApp(App).use(Antd).mount(#app)5 修改 src/App.vue使用 Ant Design Vue 组件。
templatediv classcontainera-space wrapa-button typeprimaryPrimary Button/a-buttona-buttonDefault Button/a-buttona-button typedashedDashed Button/a-buttona-button typetextText Button/a-buttona-button typelinkLink Button/a-button/a-space/div
/templatescript setup langts
/scriptstyle scoped
/style6 执行命令 npm run dev 启动应用浏览器访问 http://localhost:5173/。
总结
本文只介绍了全局完整注册 Ant Design Vue 的方法适用于对打包文件大小不敏感的场景除此外还可以全局部分注册和局部注册组件参考 官方文档。
