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;