Vue3學習（二）之 集成Ant Design Vue

一、集成Ant Design Vue

npm install ant-design-vue@2.0.0-rc.3 --save

兼容性

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中修改內容如下：

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';
//優點就是方便開發，缺點就是打包的時候會使文件較大（但不並影響什么）
createApp(App).use(store).use(router).use(Antd).mount('#app')

2、組件引用

完整引入后，我們就能快樂的使用組件了，如果你之前使用過Vue2.0或者 Element UI相對上后會更快。

三、組件使用示例

我們來為home主頁，添加一個按鈕，如下圖：

1、我們在home主頁做修改

<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啟動，查看結果如下圖：

四、寫在最后

本來很簡單個事，可惜身體不佳（不能久坐），但是還是想堅持下來，只有技術你的投入，才會有產出，也不會騙你，踏實的去學習吧