按需引入ant design vue2.x

前提条件

• 已创建好vue3项目
• 已将vue3项目的vue版本升级到最新版本‘

引入ant design vue的2.x版本

npm i --save ant-design-vue@next

安装/配置babel-plugin-import插件

npm install babel-plugin-import -D

新建babel.config.js文件

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      "import",
      {libraryName: "ant-design-vue", libraryDirectory: "es", style: true}
    ]
  ]
}

配置需要按需引入的组件

新建 antd.ts 文件, 仅用于引入必须的组件

import {
  Button,
  Row,
  Col,
  Input,
  Form,
  Radio,
  Select,
  Collapse,
  Tabs,
  Empty
} from 'ant-design-vue';

const FormItem = Form.Item;
const Option = Select.Option;
const TabPane = Tabs.TabPane

export default [
  Button,
  Row,
  Col,
  Input,
  Form,
  FormItem,
  Radio,
  Select,
  Option,
  Collapse,
  Tabs,
  TabPane,
  Empty
]

修改 main.ts, 执行按需引入

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import antdCompArr from "./antd";

const app = createApp(App);
antdCompArr.forEach((comp) => {
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  //@ts-ignore
  app.use(comp);
});
app.use(store).use(router).mount("#app");

less异常处理

如果出现类似如下异常：

 error  in ./node_modules/ant-design-vue/es/empty/style/index.less

Syntax Error:

// https://github.com/ant-design/ant-motion/issues/44
.bezierEasingMixin();
^
Inline JavaScript is not enabled. Is it set in your options?
      in E:\workspace\antd2-demo\node_modules\ant-design-vue\es\style\color\bezierEasing.less (line 110, column 0)

解决方案：

在项目根目录下新建文件 vue.config.js

less-loader ^5.0.X

// vue.config.js 文件

module.exports = {
  css: {
    loaderOptions: {
      less: {
        javascriptEnabled: true
      }
    }
  }
}

less-loader ^6.0.X

// vue.config.js 文件

module.exports = {
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          javascriptEnabled: true
        }
      }
    }
  }
}