一、基本介绍
为啥要设计该框架？
问过很多中小团队以及部分中后台团队，团队项目有啥规范吗？ 得到的回答是几乎无，其中有个比较共同的借口是严格的规范会影响大家的开发效率。
其实结合工具的规范化不仅不会降低开发效率，还能够提升团队的开发&维护效率。试想当你的项目有以下问题的时候，你难道不觉得它会阻碍开发效率和提高维护难度吗？
项目问题：
-
代码格式不一致
-
命名（项目、组件、公共库、文件等）不规范
-
样式随意，几乎无公共方法，大量重复代码，color等全部写死（当客户要求换色的时候简直是地狱）...
-
JavaScript、vue，大量冗余代码，大部分人只关注完成功能，维护性及其差
-
有大量几百甚至上千行代码的文件
-
无代码规范
-
没有人关注效率与质量，只关注交付
说难听些这些只是可以运行的垃圾代码堆而已，它只会纵容团队成员写出更多垃圾代码。
好的架构应该有哪些特点呢？
1、足够灵活
2、扩展性强
3、可维护性
4、规范性
二、技术选型与规范
1、HTML
2、CSS
3、Javascript
4、Vue
5、命名
三、具体实现
该前端框架基于Vue2.6.14 + typescript4.5.5 + vue-router3.5.1 + vuex3.6.2 + element-ui实现
node版本 > v14.6.0
框架实现了以下功能：
1、代码规范
引入JavaScript规范、typescript规范、vue规范，实现保存时格式化以及代码修复，git commit前进行代码规范校验，校验失败不能提交代码
- 代码规范符合eslint规范
2、git提交规范以及工具化实现
参考文档git提交规范以及工具化
3、单元测试
实现基于Karma+mocha+Vue-test-utils+chain的单元测试方案
4、结构化styles
- css也需要架构 CSS架构
5、typescript引入
- vue组件支持typescript
- 引入vue-property-decorator、vuex-module-decorators支持vue组件、vuex类的写法 参考vue2如何更好的支持typescript
四、基本功能功能
- 基本表格
- 自定义图标
- 表单
- 国际化
功能参考该项目vue-manage-system
五、总结
可以作为框架模板用于任何企业级项目。
