按需导入antd/ant-design-vue,Nuxt按需导入antd/ant-design-vue

1、所有文章优先发表在个人博客上： https://www.xdx97.com
2、后续如果有修改的话，可能忘记更新到CSDN了，给你带来不便，抱歉。
3、个人博客本篇文章地址 ： https://www.xdx97.com/article/647074798064631808
1、首先我在创建项目的时候就选择了antd这个框架，所以插件那块会有一个antd-ui.js

如果没有的话，可以npm安装一下antd，然后在plugins目录下建立一个antd-ui.js

npm i ant-design-vue

配置按需导入

1、配置JS

import Vue from 'vue'
import Carousel from 'ant-design-vue/lib/carousel'; // 加载 JS
import Spin from 'ant-design-vue/lib/spin'; // 加载 JS
import Tag from 'ant-design-vue/lib/tag'; // 加载 JS
import Icon from 'ant-design-vue/lib/icon'; // 加载 JS
import Input from 'ant-design-vue/lib/input'; // 加载 JS
import Button from 'ant-design-vue/lib/button'; // 加载 JS
import Pagination from 'ant-design-vue/lib/pagination'; // 加载 JS
import Modal from 'ant-design-vue/lib/modal'; // 加载 JS
import Tooltip from 'ant-design-vue/lib/tooltip'; // 加载 JS
import Steps from 'ant-design-vue/lib/steps'; // 加载 JS
import Collapse from 'ant-design-vue/lib/collapse'; // 加载 JS
import Divider from 'ant-design-vue/lib/divider'; // 加载 JS
import message from 'ant-design-vue/lib/message'; // 加载 JS



Vue.use(Carousel)
Vue.use(Spin)
Vue.use(Tag)
Vue.use(Icon)
Vue.use(Input)
Vue.use(Button)
Vue.use(Pagination)
Vue.use(Modal)
Vue.use(Tooltip)
Vue.use(Steps)
Vue.use(Collapse)
Vue.use(Divider)
Vue.prototype.$message = message;
message.config({
    top: `70px`,
    duration: 2,
    maxCount: 3,
});

2、配置css

最终效果