目錄

• 一、整合Ant Design
• 二、元件的使用
• 1、完整引用
• 2、元件引用
• 三、元件使用示例
• 1、我們在home主頁做修改
• 2、重新啟動服務檢視效果
• 四、總結

上一篇文章我們介紹了利用Vue3 建立Vue CLI 專案（一）接下來承接上一篇文章的基礎繼續展開下面文章的內容

一、整合Ant Design Vue

SQL：

npm install [email protected] --www.cppcns.comsave

相容性：

Ant Design Vue 2.x 支援所有的現代瀏覽器。

如果需要支援 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.';
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主頁做修改

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. + TypeScript App"/>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import HelloWorld frowww.cppcns.com
 
m '@/components/HelloWorld.vue'; // @ is an alias to /src

export default defineComponent({
  name: 'Home',components: {
    HelloWorld,},});
</script>

2、重新啟動服務檢視效果

雙擊server啟動http://www.cppcns.com，檢視結果如下圖：

四、總結

到此這篇關於Vue3整合Ant Design Vue 的文章就介紹到這了,更多相關Vue3整合Ant Design Vue內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！