[JavaScript知识库]Vue 3.x Ant Design 使用 babel-plugin-import 按需加载

1、安装babel-plugin-import

npm i babel-plugin-import --dev --save

2、安装 less-loader

npm install less-loader --save-dev

3、安装less

npm install less --save-dev

4、配置babel.config.js

? ? ? ? 如果没有这个文件夹，就在根文件下创建此文件夹

module.exports = {
    presets: ["@vue/app"],
    plugins: [
        [
            "import",
            { libraryName: "ant-design-vue", libraryDirectory: "es", style: true }
        ]
    ]
};

5、配置vue.config.js

????????如果没有这个文件夹，就在根文件下创建此文件夹

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

6、在main.js中引入

import {
    Button, Pagination, Layout, Card,
    Divider, Input, Menu, Modal,
    Collapse, Spin, List, Popconfirm,
    Avatar, Select, Form, PageHeader
} from 'ant-design-vue'

import 'ant-design-vue/dist/antd.css';


createApp(App).use(List).use(Card).mount('#app')