VUE3.0+ANTDESIGN，含ant-design/icon-vue加载

npm install -g @vue/cli@next
vue create vueapp //选择vue3
cd vueapp
npm i --save ant-design-vue@next  //测试版，稳定版好像不正常工作
npm i babel-plugin-import --dev //可能已默认安装
npm i @ant-design/icons-vue --dev  //vue3.0 icon组件安装

一、全面加载Antd （不含 icon)

main.js:

import {createApp} from 'vue'
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
import App from './App.vue'

createApp(App)
    .use(Antd) 
    .mount('#app')

二、按需加载，减少体积

1 使用 babel-plugin-import（推荐）。

babel.config.js中加入plugins配置段

// .babelrc or babel-loader option
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  "plugins": [
    ["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css" }] // `style: true` 会加载 less 文件
  ]
}

（1）全局调用,无加加载icon

main.js: //加在这里面，可以在其它所有vue中调用

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

createApp(App)
    .use(DatePicker)  
    .mount('#app')

hello.vue:

<a-DatePicker />

（2）组件调用(含ant-design/icon-vue加载)

hello.vue:

<template>   
  <DatePicker />
  <FilterOutlined  />
</template>
<script> 
import {DatePicker} from 'ant-design-vue'
import { FilterOutlined } from '@ant-design/icons-vue';

export default {
  name: 'App',
  components: {
  	FilterOutlined,
    DatePicker
  }
}
</script>

2.手动引入

import DatePicker from 'ant-design-vue/lib/date-picker'; // 加载 JS
import 'ant-design-vue/lib/date-picker/style/css'; // 加载 CSS

createApp(App)
    .use(DatePicker)  
    .mount('#app')
// import 'ant-design-vue/lib/date-picker/style';         // 加载 LESS