(一)安裝ant design vue以及最基礎的使用

1:在vue3.x中安裝ant design vue 模塊,安裝完成以后在node_modules里面會多一個ant-design-vue文件夾，呢里以安裝2.28版本為例

npm install ant-design-vue@next --save  (如果要安裝最新版本的3.11：npm i --save ant-design-vue)

2:在main.js里面引用ant-design-vue,以及樣式的引用

 import Antd from 'ant-design-vue'

 import 'ant-design-vue/dist/antd.css'

3:掛在ant-design-vue

app.use(Antd)

4：如果只引用ant-design-vue里面的某個模塊

import { Button } from 'ant-design-vue';

app.use(Button )

5：在其他頁面就可以用ant-design-vue的對應的組件了

<template>

<!-- 用ant-design-vue里面的button -->

  <a-button type="primary">Primary</a-button>

  <a-button type="danger">Primary</a-button>

  <!-- 調用組件 -->

  <StepBackwardOutlined />

</template>

<script>

//引用組件

import { StepBackwardOutlined } from "@ant-design/icons-vue";

export default {

  name: "AppA5",

  data() {

    return {};

  },

  components: {

    //掛在組件

    StepBackwardOutlined,

  },

  methods: {},

  mounted() {},

};

</script>

<style>

</style>