前言
Coder 是怎么样提高自己的实力?一件事件做坚持一万遍,唯手熟尔。
不知道各位有没有体会,总感觉之前的代码写的很 low 逼,想抽点空来折腾折腾自己还是很有乐趣的。重构还是很有乐趣的。手工狗头镇楼!
搭建基础框架
一般来说,中小型团队的中台项目都是前端自己主导样式,而样式、布局、路由、权限等等一系列的通用性很强的基础框架,自研比较花时间,投入的回报率不高,最好的方法就是在比较成熟的方案上进行一定的个性化定制,性价比会很高,所以我们也采用了 UmiJS + ANT DESIGN PRO 的架构来进行项目升级(之前的老项目基于 Umi2.0 与 ANT DESIGN PRO 3.0 开发)
UmiJS 是什么?
UmiJS,中文可发音为乌米,是可扩展的企业级前端应用框架。Umi 以路由为基础的,同时支持配置式路由和约定式路由,保证路由的功能完备,并以此进行功能扩展。然后配以生命周期完善的插件体系,覆盖从源码到构建产物的每个生命周期,支持各种功能扩展和业务需求。
ANT DESIGN PRO 是什么?
Ant Design Pro 是一个企业级中后台前端/设计解决方案,基于 Ant Design 的设计规范和基础组件的基础上,提炼出典型模板/业务组件/配套设计资源,进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。
快速搭建基础框架
我们直接采用 UmiJS 3.0 + Ant Design Pro 4.0 来构建一个基础的模板。
yarn create umi
Select the boilerplate type (Use arrow keys)
❯ ant-design-pro - Create project with an layout-only ant-design-pro boilerplate, use together with umi block.
app - Create project with a simple boilerplate, support typescript.
block - Create a umi block.
library - Create a library with umi.
plugin - Create a umi plugin.
复制代码
Ant Design Pro 脚手架将会自动安装,安装完依赖之后,一个基础框架就完成了,此章终结。
自定义模块
删除全球化
一般来说,Ant Design Pro 的国际化在大部分团队意义不大,所以可以先删除,后期有需求再进行添加。
先