(一)安装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>