使用**Vite**搭建的项目使用babel-plugin-import按需导入无效，可以用[unplugin-vue-components](https://github.com/antfu/unplugin-vue-components)。如果使用了**Babel**，比如说用**Vue-Cli**搭建的项目，可以使用babel-plugin-import。 1. 安装 **ant design vue** ``` npm install ant-design-vue@next --save ``` 2. 安装 **babel-plugin-import** ``` npm install babel-plugin-import -D ``` 3. 安装 **less** 和 **less-loader** 由于ant design vue使用less编写的，所以需要安装less，less-loader ``` npm install less less-loader -D ``` 4. 配置 **babel.config.js** 文件 ``` module.exports = { presets: ["@vue/cli-plugin-babel/preset"], plugins: [ [ "import", { libraryName: "ant-design-vue", libraryDirectory: "lib", style: "css", }, ], ], } ``` 这种配置适用于最新版的less ``` module.exports = { presets: ["@vue/cli-plugin-babel/preset"], plugins: [ [ "import", { libraryName: "ant-design-vue", libraryDirectory: "es", style: true, }, ], ], } ``` 当使用这种配置时，运行时会报错，TypeError: this.getOptions is not a function，是由于less版本过高，可以尝试降低版本，less@3.13.1，less-loader@7.1.0。 5. 配置 **vue.config.js** javascriptEnabled在less3.0之前是默认true，但是在3.0版本之后是默认false，因此需要手动设置true，否则会报错。 ``` module.exports = { css: { loaderOptions: { less: { lessOptions: { javascriptEnabled: true, }, }, }, }, } ``` 6. 开始使用用法一：**main.js** 中按需引入 ``` import { createApp } from 'vue' import App from './App.vue' import { Button,message } from 'ant-design-vue'; const app = createApp(App) app.config.globalProperties.$message = message; app.use(Button).mount('#app') ``` ``` ``` 用法二：在 **.vue** 文件中引入 ``` ```