一、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引入。 // 按需引入所需組件，統一引入文件
import './components/lazy_antd'
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 pro取消登录_JeecgBoot实战按需加载 Ant-Design-Vue和Icon 的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔 網站內容還不錯，歡迎將生活随笔 推薦給好友。
