按需引入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");
作者：悟空和大王
链接：https://juejin.cn/post/7019062042573144078