欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue3（二）集成Ant Design Vue

 更新時(shí)間：2021年10月18日 10:55:46   作者：久曲健  
上一篇文章我們介紹了利用Vue3 創(chuàng)建Vue CLI 項(xiàng)目（一），接下來(lái)就來(lái)看看Vue3集成Ant Design Vue 的相關(guān)資料，需要的小伙伴可以參考一下文章的具體內(nèi)容

上一篇文章我們介紹了利用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中組合式API和選項(xiàng)式API的用法與比較

    探索Vue中組合式API和選項(xiàng)式API的用法與比較

    Vue3為我們開(kāi)發(fā)提供了兩種組件邏輯實(shí)現(xiàn)方式：選項(xiàng)式API和組合式API,本文將嘗試為大家分析什么是選項(xiàng)式API和組合式API,以及兩種API的優(yōu)缺點(diǎn),希望對(duì)大家有所幫助
    2023-12-12
  • vue使用elementUI組件實(shí)現(xiàn)分頁(yè)效果

    vue使用elementUI組件實(shí)現(xiàn)分頁(yè)效果

    分頁(yè)在展示數(shù)據(jù)列表的場(chǎng)景肯定是非常多的,一般的項(xiàng)目開(kāi)發(fā)中,數(shù)據(jù)量特別大,一般都是后端接口直接處理分頁(yè)返回,前端直接調(diào)用即可,本文給大家介紹了vue使用elementUI組件實(shí)現(xiàn)分頁(yè)效果,需要的朋友可以參考下
    2023-12-12
  • Vue生命周期實(shí)例分析總結(jié)

    Vue生命周期實(shí)例分析總結(jié)

    Vue的生命周期就是vue實(shí)例從創(chuàng)建到銷(xiāo)毀的全過(guò)程,也就是new Vue()開(kāi)始就是vue生命周期的開(kāi)始。Vue實(shí)例有?個(gè)完整的?命周期,也就是從開(kāi)始創(chuàng)建、初始化數(shù)據(jù)、編譯模版、掛載Dom->渲染、更新->渲染、卸載等?系列過(guò)程,稱這是Vue的?命周期
    2022-10-10
  • vue 父組件通過(guò)$refs獲取子組件的值和方法詳解

    vue 父組件通過(guò)$refs獲取子組件的值和方法詳解

    今天小編就為大家分享一篇vue 父組件通過(guò)$refs獲取子組件的值和方法詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2019-11-11
  • Vue結(jié)合Video.js播放m3u8視頻流的方法示例

    Vue結(jié)合Video.js播放m3u8視頻流的方法示例

    本篇文章主要介紹了Vue+Video.js播放m3u8視頻流的方法示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-05-05
  • vuex管理狀態(tài)倉(cāng)庫(kù)使用詳解

    vuex管理狀態(tài)倉(cāng)庫(kù)使用詳解

    這篇文章主要介紹了vuex管理狀態(tài)倉(cāng)庫(kù)使用詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-07-07
  • Vue解析剪切板圖片并實(shí)現(xiàn)發(fā)送功能

    Vue解析剪切板圖片并實(shí)現(xiàn)發(fā)送功能

    這篇文章主要介紹了Vue解析剪切板圖片并實(shí)現(xiàn)發(fā)送功能,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2020-02-02
  • vue?實(shí)現(xiàn)手動(dòng)分割日期

    vue?實(shí)現(xiàn)手動(dòng)分割日期

    這篇文章主要介紹了vue?實(shí)現(xiàn)手動(dòng)分割日期，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2022-10-10
  • vue+springboot實(shí)現(xiàn)圖形驗(yàn)證碼Kaptcha的示例

    vue+springboot實(shí)現(xiàn)圖形驗(yàn)證碼Kaptcha的示例

    圖形驗(yàn)證碼是做網(wǎng)站常用的功能,本文主要介紹了vue+springboot實(shí)現(xiàn)圖形驗(yàn)證碼Kaptcha的示例,具有一定的參考價(jià)值,感興趣的可以了解一下
    2023-11-11
  • Vue組件如何自動(dòng)按需引入詳析

    Vue組件如何自動(dòng)按需引入詳析

    剛學(xué)vue時(shí)候?qū)τ谌纸M件和局部組件有點(diǎn)懵,不知道什么時(shí)候用全局,什么時(shí)候用局部,下面這篇文章主要給大家介紹了關(guān)于Vue組件如何自動(dòng)按需引入的相關(guān)資料,需要的朋友可以參考下
    2021-12-12

最新評(píng)論