1、导入并配置ant-design-vue
官网说的十分清楚，我直接copy官网的操作
npm i --save ant-design-vue

在main.js中完整引入 ant-design-vue
import Vue from 'vue';
import Antd from 'ant-design-vue';
import App from './App';
import 'ant-design-vue/dist/antd.css';
Vue.config.productionTip = false;

Vue.use(Antd);

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>',
});

2、阿里巴巴矢量图标库创建项目

3、全局配置阿里巴巴矢量图标（也可以局部vue文件使用，单独导入component）
在main.js中
//全局引入阿里巴巴矢量图标
import Icon from 'ant-design-vue/es/icon/index'
const MyIcon = Icon.createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_2253742_i247dt9fum.js' // 在 iconfont.cn 上生成
});
Vue.component('MyIcon', MyIcon);

4、使用阿里巴巴矢量图标
直接使用就行了


<my-icon style="color:#686868;font-size:58px;"type="icon-jiantou2"/>

    
 阿里 ant-design  菜单比较丰富 https://github.com/ant-design/ant-design-mobile
 
天和风雨顺 
地和五谷丰 
人和事业旺 
家和万事兴

转载于:https://www.cnblogs.com/wukong1688/p/11067609.html

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




最终效果

vue:

/deep/.ant-card .ant-card-head {

padding: 4px 32px;

}

避免全局渲染可以在<style> 上加 scope属性, 或者自定类名
react:

:global{

.ant-card .ant-card-head {

padding: 4px 32px;

}

}

避免全局渲染可以自定类名
/-------------------------------------------------------------------------------------------------------------------------
 树形控件
 自定义属性可以直接写在treeData里, 可以在select->data->props里找到自定义