Vue3学习(二)之 集成Ant Design Vue
一、集成Ant Design Vue
npm install ant-design-vue@2.0.0-rc.3 --save
兼容性
Ant Design Vue 2.x 支持所有的现代浏览器。
如果需要支持 IE9+,你可以使用 Ant Design Vue 1.x & Vue 2.x。
对于 IE 系列浏览器,需要提供 es5-shim 和 es6-shim 等 Polyfills 的支持。
二、组件的使用
官网地址: https://2x.antdv.com/docs/vue/getting-started-cn
1、完整引用
在main.ts中修改内容如下:
import { createApp } from 'vue';
import Antd from 'ant-design-vue';
import App from './App.vue';
import 'ant-design-vue/dist/antd.css';
import router from './router';
import store from './store';
//优点就是方便开发,缺点就是打包的时候会使文件较大(但不并影响什么)
createApp(App).use(store).use(router).use(Antd).mount('#app')
2、组件引用
完整引入后,我们就能快乐的使用组件了,如果你之前使用过Vue2.0或者 Element UI相对上后会更快。
三、组件使用示例
我们来为home主页,添加一个按钮,如下图:
1、我们在home主页做修改
<template>
<div class="home">
<a-button type="primary" danger>Primary</a-button>
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
export default defineComponent({
name: 'Home',
components: {
HelloWorld,
},
});
</script>
2、重新启动服务查看效果
双击server启动,查看结果如下图:
四、写在最后
本来很简单个事,可惜身体不佳(不能久坐),但是还是想坚持下来,只有技术你的投入,才会有产出,也不会骗你,踏实的去学习吧
优秀不够,你是否无可替代
软件测试交流QQ群:721256703,期待你的加入!!
欢迎关注我的微信公众号:软件测试君

【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库