Vue3（二）集成Ant Design Vue
更新時間：2021年10月18日 10:55:46 作者：久曲健
上一篇文章我們介紹了利用Vue3 創(chuàng)建Vue CLI 項目（一），接下來就來看看Vue3集成Ant Design Vue 的相關資料，需要的小伙伴可以參考一下文章的具體內容
上一篇文章我們介紹了利用Vue3 創(chuàng)建Vue CLI 項目（一）接下來承接上一篇文章的基礎繼續(xù)展開下面文章的內容
一、集成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。
對于 IE 系列瀏覽器，需要提供 es5-shim 和 es6-shim 等 Polyfills 的支持。
二、組件的使用
官網地址：https://2x.antdv.com/docs/vue/getting-started-cn
1、完整引用
在main.ts中修改內容如下：
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)點就是方便開發(fā)，缺點就是打包的時候會使文件較大（但不并影響什么）
createApp(App).use(store).use(router).use(Antd).mount('#app')
2、組件引用
完整引入后，我們就能快樂的使用組件了，如果你之前使用過Vue2.0或者 Element UI相對上后會更快。
三、組件使用示例
我們來為home主頁，添加一個按鈕，如下圖：
1、我們在home主頁做修改
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、重新啟動服務查看效果
雙擊server啟動，查看結果如下圖：
四、總結
到此這篇關于Vue3集成Ant Design Vue 的文章就介紹到這了,更多相關Vue3集成Ant Design Vue內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
Vue3為我們開發(fā)提供了兩種組件邏輯實現(xiàn)方式：選項式API和組合式API,本文將嘗試為大家分析什么是選項式API和組合式API,以及兩種API的優(yōu)缺點,希望對大家有所幫助2023-12-12
分頁在展示數(shù)據(jù)列表的場景肯定是非常多的,一般的項目開發(fā)中,數(shù)據(jù)量特別大,一般都是后端接口直接處理分頁返回,前端直接調用即可,本文給大家介紹了vue使用elementUI組件實現(xiàn)分頁效果,需要的朋友可以參考下2023-12-12
Vue的生命周期就是vue實例從創(chuàng)建到銷毀的全過程,也就是new Vue()開始就是vue生命周期的開始。Vue實例有?個完整的?命周期,也就是從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模版、掛載Dom->渲染、更新->渲染、卸載等?系列過程,稱這是Vue的?命周期2022-10-10
今天小編就為大家分享一篇vue 父組件通過$refs獲取子組件的值和方法詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
本篇文章主要介紹了Vue+Video.js播放m3u8視頻流的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
這篇文章主要介紹了vuex管理狀態(tài)倉庫使用詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-07-07
這篇文章主要介紹了Vue解析剪切板圖片并實現(xiàn)發(fā)送功能,本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2020-02-02
這篇文章主要介紹了vue?實現(xiàn)手動分割日期，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
vue+springboot實現(xiàn)圖形驗證碼Kaptcha的示例
圖形驗證碼是做網站常用的功能,本文主要介紹了vue+springboot實現(xiàn)圖形驗證碼Kaptcha的示例,具有一定的參考價值,感興趣的可以了解一下2023-11-11
剛學vue時候對于全局組件和局部組件有點懵,不知道什么時候用全局,什么時候用局部,下面這篇文章主要給大家介紹了關于Vue組件如何自動按需引入的相關資料,需要的朋友可以參考下2021-12-12