Vue3学习（⼆）之集成AntDesignVue ⼀、集成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 的⽀持。
⼆、组件的使⽤
1、完整引⽤
在main.ts中修改内容如下：
import { createApp } from 'vue';
import Antd from 'ant-design-vue';
antdesignvue 配置外部文件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:729038198，我们将在24小时内删除。