中大型前端项目开发框架--vue3+typescript+ant+vite

257 阅读3分钟

前要

中大型前端项目,越到后期越难维护.需求更改后,是不是原来的逻辑要改一下,页面布局产品突发奇想,是不是也会换一下,代码基本上是越改越难看,今天这里添加一个变量,明天那里添加一段逻辑,改着改着,后面的人非万不得以不怎么想到前人的代码,改起来麻烦,实在要改,很多人就直接重写.

typescript,可以看清楚每一个对象的属性, 方法的参数等, 便利很多,也能免除很多bug的产生.

网上谈typescript好处的很多,这里就不多说了.我们来谈谈它的麻烦.

typescript的优点也是他的弱势,作为开发,让你对每个变量都要定义他的类型,一个变量,很愉快,十个变量还不错.但当这个量达到百时,一次让你写百个变量,这事就有点不咋想干了.(别说没百个,你多定义几个接口的出入参,这事就明白了)

追根溯源

我们来追根溯源一下,变量来源于哪里呢?

翻看一下代码,变量多是接口的出入参,另外小一部分是用来辅助页面的展示之类

能搞定一部分,就香一点,那么我们就先来解决大量的接口出入参定义.

后端都会都提供api文档,(别抬杠,如果后端提供的api是非网页版,甚至没有,那帮不了你) api文档会对每个字段有说明,并且也有类型. 那么我们就可以将api文档变成我们的变量申明文件,再进一步可以根据api生成我们的接口文件,再进一步,增删改查这类常用文件就可以不用手写了.

真香之道

要用typescript,那么就来看看vue3吧.

要做中大型管理后台,那么就来看看一个开箱即用的前端框架:

Vben Admin

vue3+typescript+ant+vite

这个后台框架,针对表单\表格还有一些其他组件的二次封装,很实用.个人真诚推荐,用了你就知道香了,作者文档写比较详细,我就不在这里帮吹了.感谢作者的奉献.

而用这些,那么一个根据接口生成出入参的代码生成器,就能让你有更多的时间去陪家人了.

代码生成器的前置要求

  1. 需要有后端有较为规范的网页版接口文档,如果是swagger api,那么更棒了,直接用代码生成器的代码,我们的代码生成器,就支持他
  2. 与后端进一些约定吧,比说枚举要按什么格式来写,方便我们根据格式来截取,比如:
促销类型: GROUP_COMBO-1-组合套餐 ,WITH_DISCOUNT-2-满件促销 ,WITH_ADD-3-加价购 ,ITEM_SKU-4-单品优惠 ,FULL_REDUCTION-5-满金额 ,BUY_SEND-6-买送

比如说,分页,分页的出入参都用同一个类吧,比如说,有的项目因为是多个人写的,有的时候页数叫page,有的时候叫pages,统一一下能降低很大的沟通成本

再比如说,用户id,有的人叫userId, 有的叫uid, 再有的叫userid,求求后端统一下 ,因为统一后,可以根据名字,直接生成对应的自定义组件,省了你到处复制的麻烦(当然没有这个,无非是不能生成对应的代码,也能用)

最后

上代码生成器链接:

代码生成器

代码生成器持续更新中,也欢迎小伙伴自己根据自己的项目改写,如果有需要也可以联系作者.