vue tree组件_Ant-Design-Vue和Icon按需加载方案

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.warningprocess.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"
备注： 组件如果有缺少，需手工添加。

参考文献：

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按需加载

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 新增一个配置

.set('@ant-design/icons/lib/dist$',resolve("src/icons.js"))

参考图

备注： 图标如果有缺少，需手工添加。

参考文献: https://github.com/HeskeyBaozi/reduce-antd-icons-bundle-demo

vue tree组件_Ant-Design-Vue和Icon按需加载方案 - JeecgBoot实战相关推荐

Ant-Design-Vue和Icon按需加载方案 - JeecgBoot实战
JeecgBoot实战 - 按需加载方案文章目录 JeecgBoot实战 - 按需加载方案一.Ant-Design-Vue 按需加载二.Icon按需加载一.Ant-Design-Vue 按需加 ...
ant design pro 加载慢_ant design pro项目打包后页面加载缓慢
用ant design pro框架做的项目,打包之后每一个页面加载的速度都特别慢,在.webpackrc里面配置了ignoreMomentLocale: true, disableDynamicImp ...
引入antd组件样式_create-react-app 实现 antd 的按需加载
按需加载 antd 的实现方式: 用 create-react-app 创建项目后,如果需要第三方的插件库,需要配置 webpack 配置文件,步骤如下: 首先运行 npm run eject 暴露出 ...
ant vue 设置中文_Ant Design Vue 添加区分中英文的长度校验功能
原本的maxLength属性是不区分全角/半角字符的,对于一些可中英文混合输入地方而言不太合适.所以想找一个可区分全角/半角字符的校验,而且要保证一定的可重用性. 百度搜了一圈都没找到合适的现成的解决 ...
vue tree组件_使用Vue 3.0做JSX(TSX)风格的组件开发
前言我日常工作都是使用React来做开发,但是我对React一直不是很满意,特别是在推出React Hooks以后. 不可否认React Hooks极大地方便了开发者,但是它又有非常多反直觉的地方, ...
Vue按需加载提升用户体验
Vue官方文档异步组件: 在大型应用中,我们可能需要将应用拆分为多个小模块,按需从服务器下载.为了让事情更简单, Vue.js 允许将组件定义为一个工厂函数,动态地解析组件的定义.Vue.js 只在组 ...
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 按需加载，换存，导航守卫
开发中的注意事项:代码性能的优化 1. 减少对第三方的依赖,降低耦合度 2. 加强组件的重复利用率 3. 按需加载 4. 缓存 (尽量发送请求后保存数据) 5. 开发过程中,尽量有着面向对象的思想,这 ...
Vue根据菜单json数据动态按需加载路由Vue-router
每个菜单项对应一个页面组件,根据菜单项动态按需加载路由路由配置的正确写法: /*router/index.js*/ import Vue from 'vue' import Router from ...

vue tree组件_Ant-Design-Vue和Icon按需加载方案 - JeecgBoot实战

vue tree组件_Ant-Design-Vue和Icon按需加载方案 - JeecgBoot实战相关推荐

最新文章

热门文章