CuttingMat
Why
在相当多面向定制的前端团队中,基于 Vue-Cli 模板+Element 开始一个项目仍然是惯常做法,随着项目迭代以及开发人员增加,很快就会出现一些普遍性问题,比如:
- 文件目录庞大,找代码费劲
- 引用关系混乱,不知道一段代码被多少地方引用
- 多人协作代码冲突
- 项目内反复造轮子
- 代码冗余又不敢删
- 多人开发风格自成一套,质量参差不齐
- ……
CuttingMat(切割垫板)是基于 Vue 的前端开发脚手架,可以帮助前端团队轻松应对大中型项目挑战。
How
CuttingMat 从以下几个方面着手,力求通过架构设计提高前端项目的工程质量:
目录结构设计:按业务模块组织文件,各模块独立管理自己的所有文件,再也不用从漫山遍野的目录中找文件了(目录结构设计)
路由结构设计:各模块的路由自由组合成主路由,还可以配置不设防的旁路路由(路由结构设计)
核心能力封装:权限、请求、状态……,开发者只需要关注业务代码
内置高频组件:上传、CURD、字典……,开发者只需要关注业务代码 Again
配套组件库:数据大屏、图表、地图……,开发者只需要关注业务代码 Again & Again
What
- ✅ 开发、测试、生产,多环境自动适配
- ✅ 支持同域子项目单点登录
- ✅ 权限灵活、模板灵活的路由结构
- ✅ 权限控制,基于角色实现路由、视图、请求任意颗粒度的权限控制(Power By vue-access-control)
- ✅ 用户认证,整合 Token 续期方案
- ✅ 完整的异步请求管理方案,支持请求加密
- ✅ 丝滑的请求缓存设计(Power By @cutting-mat/axios)
- ✅ 更简单的状态管理(Power By @cutting-mat/vue-store)
- ✅ 更强大的上传组件(Power By @cutting-mat/uploader)
- ✅ 核心功能模块化设计,一键开启/关闭
- ✅ 常用组件封装
- ✅ 常用 JS 方法封装
- ✅ CSS-Reset、IconFont 字体图标、常用 CSS 模块
- ✅ Vue 全局资源统一注册
- ✅ 兼容 IE
- ✅ Eslint 代码风格校验
- ✅ SplitChunks 打包配置
- ⌛ 数据大屏场景解决方案(开发中)
- ⌛ 配套组件库(开发中)
附一个完整的架构图(右键在新标签中打开,查看高清大图):