vite按需引入 Ant Design Vue 3.0

1、安装ant-design-vue插件

npm i --save ant-design-vue
npm i unplugin-vue-components -D

2、配置vite.config.js

// vite.config.js
import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    ...
    Components({
      resolvers: [AntDesignVueResolver({ importStyle: 'less' })]
      // 如果需要自定义主题色，则需要配置importStyle: 'less',并安装less: npm install less --save-dev

    })
  ]
})

到此就是全部OK啦，可以安心地使用组件了。不需要单独导入。

3、unplugin-vue-components插件无法处理非组件模块，如 message、Modal、notification、Icon等，这种组件需要手动加载：

import { createApp } from 'vue';
import App from './App';
const app = createApp(App);

import { Modal, message } from 'ant-design-vue';
import 'ant-design-vue/es/message/style/css';
import 'ant-design-vue/es/modal/style/css';

app.config.globalProperties.$Modal = Modal;
app.config.globalProperties.$message = message;