项目优化后续 ,手撸一个精简版VUE项目框架!

之前说过项目之前用的vben框架,在优化完性能后打包效果由原来的纯代码96M变成了56M,后续来啦,通过更换框架,代码压缩到了36M撒花~

现在就来详细说说是怎么手撸一个框架的!

方案:

搭建一套 vite + vue3 + ant Design3 + ts 的框架,

做好规范定制、全局组件封装、公共配置等,

格式化代码配置、语法检测等功能植入,

并且将业务代码进行移植 + 优化

具体优化项目:

1、前端公共配置

● 把主题单独抽出,做成可配置文件

● 路由配置分类,方便路由管理

● 抽取全局公共变量配置枚举

● 抽取全局的公共方法做工具类函数(utils.js)

● 代码格式化配置(prettier.config),ts检测工具配置(tsconfig.json), eslint语法校验(.eslintrc)

2、全局UI规范

● 保持全局css样式风格统一(页面间距、字体大小、字体粗细、圆角角度...等)

● css代码的书写规范

3、全局组件封装

● 按照uI提供的规范样式,对 ant Design Vue 进行统一修改

● 封装提示框,操作反馈类的统一风格组件

● 对 modal 弹出框的常用方法抽取 封装hook

● 组件规范的的定制

4、接口API统一

● 接口请求封装(axios请求全局的拦截、拦截返回处理、方法封装)

● 接口请求代码格式规范

5、业务代码迁移

● 前端公共页面部分代码重构(header、Menu)

● 迁移业务代码 + 优化业务代码

● 业务代码迁移 + 优化 (预计7天)

相关推荐
前端老鹰4 分钟前
JavaScript Intl.RelativeTimeFormat:自动生成 “3 分钟前” 的国际化工具
前端·javascript
梦想CAD控件4 分钟前
(在线CAD插件)网页CAD实现图纸表格智能提取
前端·javascript·全栈
sorryhc26 分钟前
【AI解读源码系列】ant design mobile——Space间距
前端·javascript·react.js
页面仔Dony1 小时前
绝对路径与相对路径的区别及作用
前端·javascript
林太白1 小时前
Zustand状态库(简洁、强大、易用的React状态管理工具)
前端·javascript·react.js
YuJie2 小时前
vue3 无缝滚动
前端·javascript·vue.js
小野鲜2 小时前
前端打开新的独立标签页面,并且指定标签页的大小,管理新标签页面的打开和关闭(包含源码和使用文档)
前端·javascript
十五_在努力2 小时前
参透 JavaScript —— 解析浅拷贝、深拷贝及手写实现
前端·javascript
王六岁2 小时前
JavaScript值和引用详解:从栈堆内存到面试实战
javascript·面试
ikonan4 小时前
译:Chrome DevTools 实用技巧和窍门清单
前端·javascript