uniapp或vue项目接入 Trae 下载安装使用实现AI写代码
下载trae软件,下载地址如下
安装trae


安装好了,如下

登录完成后显示

使用方法,例如
在uniapp插件市场中找到一个模板,比如奶茶或外卖的模板,当插件下载导入,如下所示

上面插件导入后出来这个,画出来的地方在选中,云资源选择使用阿里云的

上面操作创建好后,接下来在关联云服务或空间

没有就新建,有就选择。

新建服务空间

购买云服务空间

运行编译到微信小程序上,选择连接云端云函数

让AI接管我们的项目代码,打开 AI软件,也就是trae,选择打开文件夹,选择代码目录,如图下所示

接管后是这样的

使用例子,比如运行报错,直接把错误信息发给trae 软件,会自动 处理解决。如图下所示

查看已经修复后的,如图下所示

添加新的项目,添加一个后台管理系统模板,

2个地方也要打钩,点开始部署

后台项目代码创建好后,也需要关联服务器云空间,如下所示

上传所有的云函数到云服务器上,如图下所示

上传数据库到云服务器空间

创建数据库和上传数据库进度如下所示

上传数据库中

上传完成

查看数据库和云资源信息,可在平台上查看,点击详情查看,如下所示


查看云数据库文件信息,如图所示

添加新功能,比如添加微信二维码显示功能,在小程序代码上,添加一个云对象,剩下的让AI写。操作方法如下

下面的截图对的,只是选择的代码目录不对,选择小程序代码目录才是,这里纠正一下

创建一个数据库文件,剩下的让AI写


上面2步完成后,就可以在trae中填写规则,规则内容如下
- 使用技术栈:Vue2 + uniapp + uniCloud 开发微信小程序
- 输出语言:中文(除非另行要求)
- 沟通风格:直接给结论,避免泛泛而谈;按专家水平回答,准确全面
- 表述限制:不使用 "你可以如何操作的" 等引导语
- 代码规范:避免冗余;不写测试代码(除非明确要求);忽略注释问题
- 资源限制:不创建或引入图片(除非明确要求)
- 执行原则:严格按我的需求完成
上面的方案内容在这个规则中设置,在trae中找到设置打开,找到规则和技能,创建修改个人规则,把上面的内容填写保存。如图所示


填写内容点击保存

开始让AI写代码,根据我们描述的需求修改代码,如下
修改描述需求内容是:
开发一个扫码点餐的功能,具体任务如下:
1、通过云对象?生成桌号小程序码,同时把生成的小程序码图片链接保存到云数据库?,小程序码图片保存到云存储空间2、云数据库?的属性要求包括 “桌号、点餐二维码、创建时间”。3、当用户扫码后,会自动打开小程序,并在主页?弹窗中显示当前桌号,以及点餐人数的选项,当用户开始点餐,跳转到页面?
相关参考文档:小程序码开发文档?
把修改描述需求内容复制到trae软件中,在修改一下详细的

修改后详细的要求如下:
输入index.js就可以选择指定哪个文件对象,要写清楚指定对象

填写修改后的指定对象

修改的云数据库表描述也要指定一下

纠正一下数据库对象,上面的写错了,如下是正确的

接着填写其他的内容指定文件对象,最后添加了一个参考文档,填写了微信文档,完整的如下

上面没有换行,可以按alt+回车可以换行,换行后显示好看点

微信文档地址
内容填完后发送就可以让AI写了
等待AI写代码

AI已经写完成了,如图下所示

查看代码后,如果没有问题,就可以点击保留

需要上传到云服务器空间

数据库也要上传到云服务器空间

处理vue代码数据库文件同步问题,把云服务空间上的数据库下载到本地,

安装这个,选中下载下来的数据库,选择下面的

安装

安装成功

在来一次的操作,如下画出来的

上面操作后打开 这个页面,选择如下画出来的,确定

上面操作完成后出现全并窗口,合并就可以了,如图下所示

继续合并

找到后台代码文件pages.json,搜索关健字,这个关健字就是我们的云函数取的名字,搜索可以找到对应页面配制,为接下来的后台添加新菜单做准备工作

打开后台系统登录后,找到系统管理---菜单管理-----新增一级菜单 ,

填写一级菜单信息,点击提交操作完成。

填写后的信息是

后台代码中取的页面配制路径来源是

刷新后看到后台页面,但是还得修改的,先看看生成后的页面如下

之前添加的云对象是前端小程序的,后台的代码没有云对象,需要从云服务空间下载下来,如下


下载好云对象了

使用trae软件打开后台代码,填写要让AI修改的代码,描述好内容,让AI做,内容模板如下
请完成如下任务
1、页面?,填写桌号并点击新增的按钮后,通过云对象?,生成小程序码,并且和桌号关联。2、页面?不需要用户输入小程序码图片链接,而是根据输入的桌号生成小程序码图片链接,小程序码图片存放在云存储空间,用户也不需要输入创建时间,默认为当前时间即可3、页面?,要求以图片的形式,展现生成的小程序码
参考文档:?
选择指定云对象或修改的页面操作方法如下:

修改后的内容模板是,发送给trae,让AI写这个代码出来
#请完成如下任务
1、页面 add.vue ,填写桌号并点击新增的按钮后,通过云对象 index.obj.js ,生成小程序码,并且和桌号关联。同时要添加填写的标题,标题要中文显示,分别为桌号、二维码、创建时间
2、页面 add.vue 不需要用户输入小程序码图片链接,而是根据输入的桌号生成小程序码图片链接,小程序码图片存放在云存储空间,用户也不需要输入创建时间,默认为当前时间即可
3、页面 list.vue ,要求以图片的形式,展现生成的小程序码,同时要添加填写的标题,标题要中文显示,分别为桌号、二维码、创建时间
参考文档: https://developers.weixin.qq.com/miniprogram/dev/server/API/qrcode-link/qr-code/api_getunlimitedqrcode.html

不到1分钟AI写完代码了,如图下所示,可查看修改哪个文件,是否采用AI写的代码,采用就保留,点击图下画出来的包保留功能 就可以保存使用了

执行完成后,刷新打开后台,发现标题还是英文,没有修改这个,我们接着写详细 一点,让AI改
修改内容描述是
#请完成如下任务
1、页面 add.vue ,*号前面添加文字标题,标题要中文显示,分别为桌号、二维码、创建时间
2、页面 list.vue ,同时列表标题内容要修改,标题要中文显示,分别为 tableNumber改成桌号、qrcodeUrl改成二维码二维码、createdAt改成创建时间

AI写完成了

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。
更多推荐

所有评论(0)