使用babel-plugin-import按需导入ant design vue

使用Vite搭建的项目使用babel-plugin-import按需导入无效，可以用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')

<template>
  <a-button type="primary" @click="info">message</a-button>
</template>

<script setup>
import { getCurrentInstance } from "vue"
const { proxy } = getCurrentInstance()
function info() {
  proxy.$message.info("This is a normal message")
}
</script>

用法二：在 .vue 文件中引入

<template>
  <Button type="primary" @click="info">message</Button>
  <a-input v-model:value="msg" />
</template>

<script setup>
import { ref } from "vue"
import { Button, message, Input as aInput } from "ant-design-vue"

const msg = ref("hello world")
function info() {
  message.info("This is a normal message")
}
</script>