Vue3（二）集成Ant Design Vue
上一篇文章我們介紹了利用Vue3 創(chuàng)建Vue CLI 項(xiàng)目（一）接下來(lái)承接上一篇文章的基礎(chǔ)繼續(xù)展開(kāi)下面文章的內(nèi)容
一、集成Ant Design Vue
SQL：
npm install ant-design-vue@2.0.0-rc.3 --save
兼容性：
Ant Design Vue 2.x 支持所有的現(xiàn)代瀏覽器。
如果需要支持 IE9+ ，你可以使用 Ant Design Vue 1.x & Vue 2.x。
對(duì)于 IE 系列瀏覽器，需要提供 es5-shim 和 es6-shim 等 Polyfills 的支持。
二、組件的使用
官網(wǎng)地址：https://2x.antdv.com/docs/vue/getting-started-cn
1、完整引用
在main.ts中修改內(nèi)容如下：
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';
//優(yōu)點(diǎn)就是方便開(kāi)發(fā)，缺點(diǎn)就是打包的時(shí)候會(huì)使文件較大（但不并影響什么）
createApp(App).use(store).use(router).use(Antd).mount('#app')
2、組件引用
完整引入后，我們就能快樂(lè)的使用組件了，如果你之前使用過(guò)Vue2.0或者 Element UI相對(duì)上后會(huì)更快。
三、組件使用示例
我們來(lái)為home主頁(yè)，添加一個(gè)按鈕，如下圖：
1、我們?cè)趆ome主頁(yè)做修改
HTML：
<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、重新啟動(dòng)服務(wù)查看效果
雙擊server啟動(dòng)，查看結(jié)果如下圖：
四、總結(jié)
到此這篇關(guān)于Vue3集成Ant Design Vue 的文章就介紹到這了,更多相關(guān)Vue3集成Ant Design Vue內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue?瀏覽器本地存儲(chǔ)的問(wèn)題小結(jié)
這篇文章主要介紹了Vue?瀏覽器本地存儲(chǔ),LocalStorage 和 SessionStorage 統(tǒng)稱(chēng)為 WebStorage，存儲(chǔ)大小一般支持5mb左右，但是不同的瀏覽器也有區(qū)別，具體內(nèi)容介紹跟隨小編一起看看吧2022-04-04
在vue項(xiàng)目中,將juery設(shè)置為全局變量的方法
今天小編就為大家分享一篇在vue項(xiàng)目中,將juery設(shè)置為全局變量的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
element-ui和vue表單(對(duì)話框)驗(yàn)證提示語(yǔ)(殘留)清除操作
這篇文章主要介紹了element-ui和vue表單(對(duì)話框)驗(yàn)證提示語(yǔ)(殘留)清除操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
vue-cropper組件實(shí)現(xiàn)圖片切割上傳
這篇文章主要為大家詳細(xì)介紹了vue-cropper組件實(shí)現(xiàn)圖片切割上傳，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-05-05
這篇文章主要介紹了vue3如何在setup中獲取DOM元素問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue項(xiàng)目中使用rem替換px的實(shí)現(xiàn)示例
移動(dòng)端頁(yè)面適配，rem和vw適配方案，本文主要介紹了vue項(xiàng)目中使用rem替換px的實(shí)現(xiàn)示例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-07-07
Cookbook組件形式：優(yōu)化 Vue 組件的運(yùn)行時(shí)性能
本文仿照Vue Cookbook 組織形式，對(duì)優(yōu)化 Vue 組件的運(yùn)行時(shí)性能進(jìn)行闡述。通過(guò)基本的示例代碼給大家講解，需要的朋友參考下2018-11-11
這篇文章主要為大家詳細(xì)介紹了Vue自定義可以選擇日期區(qū)間段的日歷插件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
vue3超出文本展示el tooltip實(shí)現(xiàn)示例
這篇文章主要為大家介紹了vue3超出文本展示el tooltip實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
Vue3中Composition?API和Options?API的區(qū)別
Vue3的Composition API和Options API是Vue.js框架中的兩種不同的API，本文主要介紹了Vue3中Composition?API和Options?API的區(qū)別，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06