一款Vue3.0的代码生成器的设计与实现最近在写一个大型的后台管理项目，（写的我都想吐）。一点技术含量没有，还全是表单

一.灵感

最近在写一个大型的后台管理项目，（写的我都想吐）。一点技术含量没有，还全是表单 + 表格的那种。每天不是在CV代码，就是在CV代码的路上。虽然考虑过封装一些通用的业务组件，但是也有很多问题。

1. 很难写出真正意义上的通用组件。每个组件或多或少都有不同。如下两张图的对比：

图一

图二

虽然都是 筛选条件 + 表格 + 分页 的形式，但是表格里面的筛选条件呀，以及表格的slot内容都是不一样的，全都需要定制化。所以业务组件封装的成本太高，也太麻烦。特别是万一那天，奇怪的产品要求改奇怪的需求。要怎么改组件？改完变动影响有多大？需不需要重新测试走流程？我都不敢想。

1. 对于维护和后期接盘的真的不友好。这个其实也是一个痛点。对于一些写的好的人来说，或许问题要少一点。我曾经在Vue2.0时代维护过一个mixin的组件，我都不能看，什么都封装进去了，watch就watch了上百行代码。写代码的人都懂，屎山里面改代码，跟掉进粪坑里面没区别。

基于以上思考的几点，我觉得设计一个代码生成器是可以解决以上的痛点的，正好自己最近不忙，可以考虑设计和实现一下这款产品吧。

二. 概念

简单介绍一下什么是代码生成器吧？

类比一下低代码平台,低代码平台是通过物料+布局+配置生成一个可以使用的页面。低代码平台关心的如何生成一个页面, 但是在代码生成器中我们关心的是如何生成可用性的代码。如下图

左边是配置好的渲染区， 右边是不同的生成结果。

• 低代码平台是通过渲染区，然后生成可以访问的链接形式。最终生成的是一个页面
• 代码生成器是通过渲染区，最终生成代码。

三. 设计流程

根据上面的说法，我们可以简单的设计一个代码生成器的运行流程。

其实我们的关注点主要就是两个部分：

第一个渲染区, 你肯定要通过配置区配置出来一个符合你需求的组件吧。 第二个生成结果。每种code的方法都不一样，生成的文件结果也肯定不同。

OK，看一下设计的流程图

1. 首先第一点，肯定是要选择对应的ui框架。不同的ui框架写法肯定不同。常见的就是市面上的element和antd。
2. 之后有三种方式可以提供我们使用，细说一下。

3.1 直接生成代码

选择完UI之后，我们可以根据配置的组件，生成对应的render组件，这步是核心的渲染功能。配置组件可以提供css样式、导入新的配置组件、配置组件增加页面事件等三种方式，细化配置组件。

通过选择不同的配置组件，以及设置配置组件的内容，然后在渲染区加入，最后生成.vue文件。

这里最后生成.vue代码的时候要注意，Vue3.0其实有好几种写法，比如stup语法糖和tsx等，我们这里需要兼容一下不同的写法，然后生成不同的文件结果。

3.2 读取配置json

我们可以通过导入一个json，这个json里面有很多的组件配置项，通过读取这些组件的配置项，然后在页面的渲染区把组件渲染出来，然后可以进行修改，最后导出。

3.2 读取.vue文件

这步其实跟上一个读取配置的json文件类似，也是通过读取文件，然后复现，然后修改，保存。

这里为了简便写法，统一要求导入的Vue文件写法为setup语法糖。

四. 总结

整体的设计思想其实并不难，目的就是生成一个新的Vue文件。，因为大部分的这种C端表单项目的布局大致相同，所以这里不考虑低代码那种拖拽的方式实现，改成响应式的方式实现。难点是对于不同类型写法的读取和生成。

目前项目还在开发中，我会陆续更新文章，来跟进项目进度，同时项目源码也会放到git上，大家有兴趣有想法的话，欢迎多交流。