vue3项目如何按需引入ant design vue组件和图标_ant design二维码按需引入组件

1.下载babel-plugin-import插件

npm install babel-plugin-import --save-dev

2.在babel.config文件中加入以下代码

{
  "plugins": [
    ["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css" }] // `style: true` 会加载 less 文件
  ]
}

完整babel.config文件

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

3.按需引入，新建antDesignVue.js文件

// 引入样式
import 'ant-design-vue/es/message/style/css'
// 引入所需组件
import {
    Button,
    Card,
    Spin,
    Col,
    Row,
    Tree,
    Select,
    Radio,
    Upload,
    Input,
    Modal,
    Dropdown,
    Menu,
    Layout,
    Form,
    Space,
    Switch,
    Popover,
    Checkbox,
    Breadcrumb,
    Avatar,
    Table,
    Divider,
    ConfigProvider,
    Popconfirm,
    Tabs,
    Drawer,
    Cascader,
    List
} from 'ant-design-vue';
 
// 引入所有图标
import * as Icons from "@ant-design/icons-vue";
 
// 按需引入图标
//import { StepBackwardOutlined } from "@ant-design/icons-vue";  // 按需加载图标
//const Icons = { StepBackwardOutlined }
 
const components = [Modal, Button, Card, Spin, Col, Row, Tree, Select, Radio, Upload, Input, Dropdown, Menu, Layout, Form, Space, Switch, Popover, Checkbox, Breadcrumb, Avatar, Table, Divider, ConfigProvider, Popconfirm, Tabs, Drawer, Cascader, List];
 
export default function setupAtnd(app) {
    // 注册图标
    Object.keys(Icons).forEach(key => {
        app.component(key, Icons[key])
    });
    
    // 全局挂载图标
    app.config.globalProperties.$icons = Icons;
 
    // 注册组件
    components.forEach((component) => {
        app.use(component)
    })
}

4.在mainjs文件组件并注册

import { createApp } from 'vue'
import App from './App.vue'
 
// ant-design-vue
import setupAtnd from "./antDesignVue.js"
 
 
const app = createApp(App);
 
// set up ant-desing-vue 
setupAtnd(app)
 
app.mount('#app')