当前位置: 首页 > Web前端 > vue.js

Ant-Design-Vue和Icon按需加载方法-JeecgBoot实战

时间:2023-03-31 21:23:50 vue.js

JeecgBoot实战-按需加载方法一、Ant-Design-Vue按需加载1.创建js文件'src/components./lazy_antue'//baselibraryimport{ConfigProvider,Layout,Input,InputNumber,Button,Switch,Radio,Checkbox,Select,Card,Form,Row,Col,Modal,Table,Tabs,Icon,Badge,Popover,Dropdown,List,Avatar,Breadcrumb,Steps,Spin,Menu,Drawer,Tooltip,Alert,Tag,Divider,DatePicker,TimePicker,Upload,Progress,Skeleton,Popconfirm,PageHeader,Result,Statistic,Descriptions,message,notification,Empty,Tree,TreeSelect}来自'ant-design-vue'从'viser-vue'导入ViserVue.use(ConfigProvider)Vue.use(Layout)Vue.use(Input)Vue.use(InputNumber)Vue.use(Button)Vue.use(Switch)Vue.use(Radio)Vue.use(Checkbox)Vue.use(Select)Vue.use(Card)Vue.use(Form)Vue.use(Row)Vue.use(Col)Vue.use(Modal)Vue.use(Table)Vue.use(Tabs)Vue.use(Icon)Vue.use(Badge)Vue.use(Popover)Vue.use(Dropdown)Vue.use(列表)Vue.use(头像)Vue.use(面包屑)Vue.use(步骤)Vue.use(旋转)Vue.use(菜单)Vue.use(抽屉)Vue.use(工具提示)Vue。use(Alert)Vue.use(Tag)Vue.use(Divider)Vue.use(DatePicker)Vue.use(TimePicker)Vue.use(Upload)Vue.use(Progress)Vue.use(Skeleton)Vue.use(Popconfirm)Vue.use(PageHeader)Vue.use(Result)Vue.use(Statistic)Vue.use(Descriptions)Vue.use(Empty)Vue.use(Tree)Vue.use(TreeSelect)Vue.prototype.$confirm=Modal.confirmVue.prototype.$message=messageVue.prototype.$notification=notificationVue.prototype.$info=Modal.infoVue.prototype.$success=Modal.successVue.prototype.$error=Modal.errorVue.prototype.$warning=Modal.warningprocess.env.NODE_ENV!=='production'&&console.warn('[jeecg-boot-vue]NOTICE:Antduselazy-load.')2.修改配置文件babel.config.js添加插件配置plugins:[["import",{"libraryName":"ant-design-vue","libraryDirectory":"es","style":"css"}]]参考图3.修改main.js引入配置文件src/components/lazy_antd.js,同时注解掉原始的ant-design-vueimportssrc/main.js//根据需要导入需要的组件,统一导入文件import'./components/lazy_antd'4.package.json导入依赖babel-plugin-import"babel-plugin-import":"^1.13.0"备注:如有组件缺失,需手动添加。参考资料:https://github.com/vueComponent/ant-design-vue-pro/blob/1.2.0/docs/load-on-demand.mdhttps://www.antdv.com/docs/vue/getting-started-cn/#按需加载2.图标按需加载创建js文件src/icons.js//src/icons.js//exportwhatyouneedexport{defaultasSmileOutline}from'@ant-design/图标/lib/大纲/SmileOutline';export{defaultasMehOutline}from'@ant-design/icons/lib/outline/MehOutline';//exportwhatantdothercomponentsneedexport{defaultasCloseOutline}from'@ant-design/icons/lib/outline/CloseOutline';//和其他图标...2。修改chainWebpack中的配置文件vue.config.js:(config)=>{config.resolve.alias添加一个新的configuration.set('@ant-design/icons/lib/dist$',resolve("src/icons.js"))参考图备注:如有图标缺失,需手动添加。参考资料:https://github.com/HeskeyBaozi/reduce-antd-icons-bundle-demo