Ant-Design-Vue和Icon按需加载方案 - JeecgBoot实战
JeecgBoot实战 - 按需加载方案
文章目录
- JeecgBoot实战 - 按需加载方案
- 一、Ant-Design-Vue 按需加载
- 二、Icon按需加载
一、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.warningprocess.env.NODE_ENV !== 'production' && console.warn('[jeecg-boot-vue] NOTICE: Antd use lazy-load.')
- 修改配置文件 babel.config.js增加插件配置
plugins: [[ "import", {"libraryName": "ant-design-vue","libraryDirectory": "es","style": "css"} ]
]
参考图
修改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"
备注: 组件如果有缺少,需手工添加。
参考文献:
https://github.com/vueComponent/ant-design-vue-pro/blob/1.2.0/docs/load-on-demand.md
https://www.antdv.com/docs/vue/getting-started-cn/#按需加载
二、Icon按需加载
- 创建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...
- 修改配置文件 vue.config.js
在 chainWebpack: (config) => { config.resolve.alias 新增一个配置
.set('@ant-design/icons/lib/dist$',resolve("src/icons.js"))
参考图
备注: 图标如果有缺少,需手工添加。
参考文献: https://github.com/HeskeyBaozi/reduce-antd-icons-bundle-demo
Ant-Design-Vue和Icon按需加载方案 - JeecgBoot实战相关推荐
- vue tree组件_Ant-Design-Vue和Icon按需加载方案 - JeecgBoot实战
JeecgBoot实战 - 按需加载方案 一.Ant-Design-Vue 按需加载 1.创建js文件 src/components/lazy_antd.js import Vue from 'vue ...
- vue项目实现按需加载的3种方式
vue异步组件技术 vue-router配置路由,使用vue的异步组件技术,可以实现按需加载.这种方式下一个组件生成一个js文件 用例: {path: '/promisedemo',name: 'Pr ...
- vue组件的按需加载
一.require.ensure() require.ensuire(dependencies:String[],callback:function(require),errorCallback:fu ...
- vue中路由按需加载的几种方式
使用vue-cli构建项目后,我们会在Router文件夹下面的index.js里面引入相关的路由组件,如: import Hello from '@/components/Hello' import ...
- VUE3 使用 Ant Design Vue的icon图标
安装: npm install --save @ant-design/icons-vue 2.在main入口文件引入,不想一个个一得导入,可直接循环导入即可 import { createApp } ...
- ant design pro取消登录_JeecgBoot实战按需加载 Ant-Design-Vue和Icon
一.Ant-Design-Vue 按需加载 1.创建js文件 src/components/lazy_antd.js import Vue from 'vue'// base library impo ...
- Vue按需加载提升用户体验
Vue官方文档异步组件: 在大型应用中,我们可能需要将应用拆分为多个小模块,按需从服务器下载.为了让事情更简单, Vue.js 允许将组件定义为一个工厂函数,动态地解析组件的定义.Vue.js 只在组 ...
- React(九)create-react-app创建项目 + 按需加载Ant Design
(1)create-react-app如何创建项目我前面第一章介绍过了,这里就不过多写了, (2)我们主要来说说按需加载的问题 1. 引入antd npm install antd --save 2. ...
- ant design pro 加载慢_ant design pro项目打包后页面加载缓慢
用ant design pro框架做的项目,打包之后每一个页面加载的速度都特别慢,在.webpackrc里面配置了ignoreMomentLocale: true, disableDynamicImp ...
最新文章
- drupal7获取当前路径别名
- 简明高效的 Java 并发编程学习指南
- FPGA之道(50)复位的设计
- arm-linux-gcc编译gtk程序,【又7】Arm 版GTK编译
- 远程协助TeamView软件 轻松控制计算机
- 【解题报告】Leecode 2059. 转化数字的最小运算数
- HTML section元素
- iOS和android运存机制,再次确认苹果的1G运存相当于安卓的4G运行内存
- lenet5卷积神经网络_tensorflow图像识别入门实战:使用LeNet5模型实现猫狗分类
- pycharm 安装gdal问题
- python语法学习第五天--函数(2)
- ONVIF系列——Onvif协议介绍
- mysql宾馆客房管理系统视频_java swing mysql实现的酒店宾馆管理系统项目源码附带视频指导运行教程...
- 3dmax晶格指令制作石墨烯模型的图文教程
- python修改文件的某一行_简单文件操作python 修改文件指定行的方法
- 网页自动弹出js——你懂的
- Web安全—常见加密编码方式详解(持续更新)
- 细胞器基因组|比较基因组分析助力深度挖掘细胞器进化关系
- 将两个单链表合并为一个单链表
- Django(十二)模型表关系的实现