vue 页面按需引入 antd 组件库步骤？

说明：

按照官网的方式也可以成功。但是在实际项目开发中为了避免项目体积过于庞大，一般都是按需引入组件。

温馨提示：

antd 官网有很多版本，别走错了，记住是右上角的---- 更多–> Ant Design of Vue (社区实现)
官网链接：https://ant.design/index-cn

使用步骤：

引入组件库，进行局部注册。最主要的核心代码如下：

import { Carousel, Progress } from 'ant-design-vue' // 按需引入组件并注册

  components: {
    'a-carousel': Carousel,
    'a-progress': Progress
  },

例子：

<template>
<div>
    <a-carousel autoplay>
    <div><h3>1</h3></div>
    <div><h3>2</h3></div>
    <div><h3>3</h3></div>
    <div><h3>4</h3></div>
  </a-carousel>
  <div>
    <a-progress type="circle" :percent="75" />
    <a-progress type="circle" :percent="70" status="exception" />
    <a-progress type="circle" :percent="100" />
  </div>
</div>

</template>
<script>
import { Carousel, Progress } from 'ant-design-vue' // 按需引入组件并注册

export default {

  components: {
    'a-carousel': Carousel,
    'a-progress': Progress

  },
  data () {
    return {

    }
  },
  methods: {
  }
}
</script>
<style scoped>
/* For demo */
.ant-carousel >>> .slick-slide {
  text-align: center;
  height: 160px;
  line-height: 160px;
  background: #364d79;
  overflow: hidden;
}

.ant-carousel >>> .slick-slide h3 {
  color: #fff;
}
.ant-progress-circle-wrap,
.ant-progress-line-wrap {
  margin-right: 8px;
  margin-bottom: 5px;
}
</style>

效果如图：