后端开发日常(用 CodeBuddy 开发 Vue3+Element Plus 后台,我直接快了三倍)

后端开发日常(用 CodeBuddy 开发 Vue3+Element Plus 后台,我直接快了三倍)
用 CodeBuddy 开发 Vue3+Element Plus 后台,我直接快了三倍

我是一名写代码写了10几年的前端工程师,之前写过一篇推荐国产AI龙虾的文章,亲身测试现在的国产免费AI龙虾。现在CodeBuddy在编程界异常爆火,下面由我来为你们介绍下这个编程神器!

作为一个常年开发后台管理系统的前端工程师,Vue3 + Element Plus 基本是我的标配。做过后台管理系统的牛马程序员都懂,Vue3 + Element Plus 看似简单,真正写起来全是重复劳动:表格、分页、表单、弹窗、校验等等, 一个页面写下来,大半时间都耗在机械ctrl+c,ctrl+v上。写多了真的很磨人。

现在我刚好有一个新项目,需要开发一个后台管理系统,正好拿 CodeBuddy 来试试,看下它是不是传说中那么牛!从空项目到可上线后台,我全程用它辅助,效率变化非常直观,也踩了一些真实坑,以下是我的实操过程:

一、开局:用 CodeBuddy 搭好 Vue3 + ts + Element Plus 框架

我使用CodeBuddy的步骤很简单,无需下载软件;我平时使用vscode开发,只需要添加插件即可。

按照步骤操作即可,是安装Tencent Cloud CodeBuddy,不是下面的CodeBuddy,不要选错了。

安装后点击插件,然后点击登录,需要跳转到CodeBuddy官网登录,登录完成就可以对话了。

在输入框输入指令即可使用CodeBuddy开发了。

目前官方指导价,详情自己去官网了解,如果是尝试使用,每月送的够用了。

在输入框输入,“帮我创建一个 Vue3 + Vite + Element Plus + Pinia + Vue Router 的后台管理基础项目,包含 layout、路由守卫、404 页面”

它直接给出完整可复制的操作步骤,连命令行都写死:

1、自动生成 router/index.js 动态路由结构

2、生成 src/layout/index.vue 侧边栏 + 顶栏骨架

3、给出 main.js 完整引入 Element Plus 代码

4、它还顺便配好 vite.config.js 别名 @

5、我复制粘贴,项目直接跑起来,没有任何报错。

要是自己手动搭建,我至少要折腾 20-30 分钟,这次不到 3 分钟,真的太爽了!

二、我最满意的是:以前的 CRUD 它直接帮我写完!

写后台管理页面,最枯燥的就是:表格 、搜索、分页 、增删改查这些功能。

现在有了CodeBuddy,我直接交给它做,我把产品设计的原型图,直接截图上传给它,让它使用elementui的组件,根据原型图生成前端页面。

过了1分钟,一个搜索表单,一个列表就生成了(内容涉及商业,这里就不展示了)。完全使用elementui组件去制作,还很贴心的把表单验证做好了。方法命名也规范,都是用官方的handleAdd()、handleEdit()、handleDelete()等,大大提升了我的开发速度。当然,生成的页面,还需要微微调整一下才行的。会帮你生成一些模拟数据,调试页面时需要删除。

需要创建页面,只要一句话指令,就可以生成对应的页面,路由,可以直接访问。

三、它写的vue3跟ts很规范,都是按照标准写

CodeBuddy 在 写Vue3 这方面很专业。

都是统一用vue3+ts的语法糖,需要引入的库,都引入了。

该用 ref 用 ref,该用 computed 用 computed

不会写出奇怪的解构丢失响应式问题

支持 defineProps / defineEmits 标准写法

给我写的表单验证,不会漏 prop 或 model,还把简单的表单校验做了。

后端开发日常(用 CodeBuddy 开发 Vue3+Element Plus 后台,我直接快了三倍)

我叫它把axios请求,错误提示,分页做成全局组件或者方法,一句话搞定了,还写得很标准,甚至把使用方法写出来了。这种都是创建项目时候常做的步骤,现在由它完成。

四、用多了发现:它不是万能的,复杂业务要自己兜底

用到几天我发现,CodeBuddy 强在标准化页面,弱在深度业务逻辑。简单的页面还是可以应付的。遇到复杂业务逻辑就不行了,怎么调教都不行,还一堆bug。

所以,普通标准化页面交给 CodeBuddy,复杂业务逻辑与架构自己把控。它只是辅助工具,并不能代替程序员把所有事情做好。

五、我是这样使用的(大大提升工作效率)

1、我是用 CodeBuddy 生成 Vue3 + Element Plus 基础项目

2、每个菜单页面,我把原型图上传给它,先让它生成完整 CRUD

3、等它生成好页面后,我就对照原型图进行调整,然后调试接口、改业务逻辑

4、遇到 bug 直接把报错 + 代码贴给它,它能马上定位解决,速度很快!

5、公共组件(上传、导出、错误提示)让它统一封装,需要使用的页面同步更新。

一个 20 个页面的管理后台,我以前至少要 4 天,现在2天就能完成页面制作跟页面效果了。

五、总结

优点:

1、上手简单容易,适合各位新老程序员;

2、标准 CRUD 页面生成极快,代码规范可直接使用;

3、表单校验、表格、弹窗、权限模板它都会做;

4、错误处理速度快,调试效率极高,报错信息能快速定位,快速解决;

5、代码简洁规范(有些代码我要研究下才懂)

缺点:

1、不能识别项目内部封装的工具与请求库

2、有时候请求失败,没反应

3、不能完全放手让它去工作,有时候需要检查修改;

4、有时候还会乱改你的代码,需要你引导它,让它按照你的要求去做,所以你的需求一定要明确!!!

虽然CodeBuddy方便好用,但是开始时会把你的项目代码全部扫一遍,所以,在做复杂的项目,涉及安全的项目慎用!!!

目前AI代码开发模型百花齐放,各有特色,有GitHub Copilot X,通义灵码,文心快码等,在这些没出来前,文心一言的Zulu真是惊艳到我了,希望未来他们能完善好功能,费用能便宜一些,对我们这些程序员来说太重要了。

觉得有用就点个赞,关注一下呗,后续会更新更多实用的开发工具和教程。

#CodeBuddy 使用教程##分享编程心得##程序员经验分享##程序员干货站##程序员那些事#​​

文章版权声明:除非注明,否则均为边学边练网络文章,版权归原作者所有

相关阅读

最新文章

热门文章

本栏目文章