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

Vue3（二）集成Ant Design Vue

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

上一篇文章我們介紹了利用Vue3 創(chuàng)建Vue CLI 項目（一）接下來承接上一篇文章的基礎繼續(xù)展開下面文章的內(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。

對于 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)點就是方便開發(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啟動，查看結(jié)果如下圖：

四、總結(jié)

到此這篇關(guān)于Vue3集成Ant Design Vue 的文章就介紹到這了,更多相關(guān)Vue3集成Ant Design Vue內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • 探索Vue中組合式API和選項式API的用法與比較

    探索Vue中組合式API和選項式API的用法與比較

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

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

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

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

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

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

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

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

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

    vuex管理狀態(tài)倉庫使用詳解

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

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

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

    vue?實現(xiàn)手動分割日期

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

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

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

    Vue組件如何自動按需引入詳析

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

最新評論