JeecgBoot实战 - 按需加载方案
一、Ant-Design-Vue 按需加载
1.创建js文件 src/components/lazy_antd.js
import Vue from 'vue' // base library import { 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 } from 'ant-design-vue' import Viser from 'viser-vue' Vue.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(List) Vue.use(Avatar) Vue.use(Breadcrumb) Vue.use(Steps) Vue.use(Spin) Vue.use(Menu) Vue.use(Drawer) Vue.use(Tooltip) 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.confirm Vue.prototype.$message = message Vue.prototype.$notification = notification Vue.prototype.$info = Modal.info Vue.prototype.$success = Modal.success Vue.prototype.$error = Modal.error Vue.prototype.$warning = Modal.warning process.env.NODE_ENV !== 'production' && console.warn('[jeecg-boot-vue] NOTICE: Antd use lazy-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-vue引入。
src/main.js
// 按需引入所需组件,统一引入文件 import './components/lazy_antd'
4. package.json引入依赖babel-plugin-import
"babel-plugin-import": "^1.13.0"
备注: 组件如果有缺少,需手工添加。参考文献:
二、Icon按需加载
1. 创建js文件 src/icons.js
// src/icons.js // export what you need export { default as SmileOutline } from '@ant-design/icons/lib/outline/SmileOutline'; export { default as MehOutline } from '@ant-design/icons/lib/outline/MehOutline'; // export what antd other components need export { default as CloseOutline } from '@ant-design/icons/lib/outline/CloseOutline'; // and other icons...2.修改配置文件 vue.config.js
在 chainWebpack: (config) => { config.resolve.alias 新增一个配置
备注: 图标如果有缺少,需手工添加。参考文献: https://github.com/HeskeyBaozi/reduce-antd-icons-bundle-demo
相关推荐
基于 vue3 + ant-design-vue 的中后台管理系统.zip
vuex2.x中用于设置ant-design-vue中table组件的列宽可拖拽
antdv ant-design-vue 自定义主题颜色
后台
ant-design-vue(可拖拽table).vue
基于vue-cli3 和 ant-design-vue搭建的后台管理系统模板
vue ant design的离线文档, 解压后打开目录 npm install 运行 npm start 启动 默认项目地址为 localhost:3000
ant-design-pro-vue 是 ant-design vue提供组件的整合,且是一个完整的前端框架工程。ant-design-pro里面包含了所有ant-design-vue控件的案例,非常齐全,喜欢的朋友可以下载。注意:下载后不要安装任何依赖,直接...
ant-design-vue3.x的form表单爬坑
基于 vue、ant-design-vue 的自定义Antdv 工作流组件。支持在线流程设计器,钉钉审批模式,支持流程办理、退回、自由流、会签、并行、串行、服务任务等。
i18n.ts工具文件,App.vue文件,与locales示例文件,以及说明文件
ant-design-vue-pro-master之前版本的源码,该版本支持多页签,实现页面页签显示,返回不刷新。新版本代码改动较大,此版本慎用,可参考多页签的实现方式;
@ nuxtjs-extra / ant-design-vue 适用于Ant Design Vue的Nuxt模块设置向项目添加依赖项yarn add @nuxtjs-extra/ant-design-vue @nuxt/components # or npm install @nuxtjs-extra/ant-design-vue 如果您使用...
在vue-cli4.x中按需加载ant-design-vue,在编译时报错,错误如下 原因 ant-design-vue使用less预处理器。在less3.0版本以前,javascriptEnabled属性默认为true,3.0以后默认为false。地址 目前项目中less版本为3.0.4...
ant-design-vue + VUE3,在table中按照某一列名进行排序并将内容相同的列合并; 包含原table数据排序,重组,行合并
后台返回菜单无限层级展示
使用ant-design-vue搭建的后台管理系统,可使用jeecgboot的后台,这个是最基本的框架,只有系统管理一个模块,方便后续二次开发
ant-designer-vue离线文档1.+版本
基于vue Ant-Design 的表单设计器,快速开发.zip基于vue Ant-Design 的表单设计器,快速开发.zip基于vue Ant-Design 的表单设计器,快速开发.zip基于vue Ant-Design 的表单设计器,快速开发.zip基于vue Ant-Design ...
使用vue3+ant-design-vue+vite+ts开发的通用后台框架,实现了权限系统、动态菜单、表格集成快速使用等功能,简洁干净开箱即用。 Vue3,springboot,element-ui使用技巧,实战应用开发小系统参考资料,源码参考。 ...