vue3.0使用ant-design-vue进行按需加载原来这么简单

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

const Timestamp = new Date().getTime()
module.exports = {
    chainWebpack: config => {
        config.plugin('html').tap(args => {
            args[0].title = '我的vue3.0' //这个是网站标题
            return args
        })
    },
    css: {
        loaderOptions: {
            // 你的基础样式 因为没有我就注释了
            // sass: {
            //     data: `
            //    @import "@/assets/style/base.scss";
            //  `,
            // },
            //这只主题样式，修改此文件后需要重新启动，
            less: {
                lessOptions: {
                    modifyVars: {
                      //这是配置css主题色
                      'primary-color': '#007AFF', 
                    },
                    javascriptEnabled: true,
                },
            },
        },
        // 每次打包后生成的css携带时间戳
        extract: {
            filename: `css/[name].${Timestamp}.css`,
            chunkFilename: `css/[name].${Timestamp}.css`,
        },
    },
    productionSourceMap: false,
    //打包后相对目录
    publicPath: process.env.NODE_ENV === 'production' ? '././' : './',
    configureWebpack: {
        //每次打包后生成的js携带时间戳
        output: {
            filename: `[name].${Timestamp}.js`,
            chunkFilename: `[name].${Timestamp}.js`,
        },
    },
}

import { createApp } from 'vue'
// 引入App.vue这个入口文件
import App from './App.vue'
// 引入路由
import router from './router'
const app = createApp(App)
import {
    Button,
    ConfigProvider,
    Layout,
    Menu,
    message,
    Input,
    Space,
    Dropdown,
    Divider,
    Form,
    AutoComplete,
    Modal,
    Tree,
    Drawer,
    Row,
    Col,
    Select,
    DatePicker,
    Tooltip,
    Breadcrumb,
    Popconfirm,
    InputNumber,
    Table,
    Pagination,
} from 'ant-design-vue'
app.use(Button)
    .use(Layout)
    .use(ConfigProvider)
    .use(Menu)
    .use(Input)
    .use(Space)
    .use(Dropdown)
    .use(Divider)
    .use(Form)
    .use(AutoComplete)
    .use(Modal)
    .use(Tree)
    .use(Drawer)
    .use(Row)
    .use(Col)
    .use(Select)
    .use(DatePicker)
    .use(Tooltip)
    .use(Breadcrumb)
    .use(Popconfirm)
    .use(InputNumber)
    .use(Table)
    .use(Pagination)
    .use(router).
    mount('#app')