当前位置:首页> AI教程> 使用 AI 开发 Vue3 项目,ChatGPT 和 Copilot 能写出 90% 代码

使用 AI 开发 Vue3 项目,ChatGPT 和 Copilot 能写出 90% 代码

释放双眼,带上耳机,听听看~!
探讨使用AI工具ChatGPT和Copilot开发Vue3项目,能够生成90%的代码,提高开发效率。

前言

  1. AI 仅仅是一个工具,它需要主人
  2. 让你失业的不是 AI ,而是你身边懂 AI 的同事

最近 AI 很火爆,各种文章、视频介绍 AI 以及它的使用场景。我也观察了很久。

对于我们开发人员来说,AI 能做的就是提效。即通过 AI 工具的加持,提高开发效率,让你一个人当 N 个人用。就像一辆汽车可以替代 N 辆马车。

于是,我就干脆开发了一个 Vue3 的小项目,从需求、设计、开发、优化,全程使用 AI 来操作,看看它到底怎样?

结果大大超出了我的预期,AI 能高效、高质量的生成代码,且项目 90% 的代码都是通过 AI 生成的。大概 1-2 天,我就把这个项目给做完了。

使用 AI 开发 Vue3 项目,ChatGPT 和 Copilot 能写出 90% 代码

原文地址 juejin.cn/post/725630… ,未经作者允许禁止转载

使用 ChatGPT 整理需求

需求一般是 PM 来写,但我很想看一下 ChatGPT 对于项目需求的理解能力和帮助程度,所以也尝试一下。

PS:即便我们是开发人员,不需要写需求,但你还需要评审需求呢!(不能 PM 说干啥你就干啥)使用 ChatGPT 分析需求,会让你提出更好的评审建议。

需求大纲

把你的需求背景和意向写清楚,向 ChatGPT 提问。

你是互联网行业一名资深的产品经理,现在主导设计一个博客产品的需求,
这个产品是面向编程技术人员的,例如简书、博客园、掘金这种网站。
要求产品以博客功能为主,不要有其他无关功能。你来写这个产品的需求文档,先列出需求大纲。

使用 AI 开发 Vue3 项目,ChatGPT 和 Copilot 能写出 90% 代码

可以看到它写出的需求是非常全面的,有些是自己都想不到的点。
这些需求不一定完全适用,但具有很好的参考价值。

需求细化

有了大纲以后,还可以继续提问一些需求细节,例如

根据上文,请详细描述“博客管理” 部分的需求,按层级、条目列出

还可以让它根据需求设计出需要多少页面,以及每个页面的功能。这样提问

根据上文需求,你分析需要多少个页面?每个页面都有哪些功能?按条目列出

使用 AI 开发 Vue3 项目,ChatGPT 和 Copilot 能写出 90% 代码

有了 ChatGPT 的加持,你会更快、更全面的完成项目需求。

使用 ChatGPT + Copilot 开发项目

以下功能,有的是 ChatGPT 开发的,有的是 Copilot 开发的,其实两者可以切换的,两者在生成代码时有些共性。我想同时体验两者的能力,所以混合使用了,仅供参考。

顶部栏(ChatGPT)

使用 AI 开发 Vue3 项目,ChatGPT 和 Copilot 能写出 90% 代码

先写一个左右结构的框架

写一个顶部导航栏组件,宽度 100% 。左右结构,左侧是 logo ,右侧是“登录”链接

使用 AI 开发 Vue3 项目,ChatGPT 和 Copilot 能写出 90% 代码

再开发导航菜单。注意:菜单要通过 url 参数 category 进行搜索,以及激活 activeMenu

使用 vue3 和 ElementPlus 写一个菜单组件,包含:前端、Java、Python、小程序
要求如下:
1. 每个菜单点击时,都跳转到首页,并加一个 query `?category=xxx`
2. activeMenu 要根据 url query `category` 参数实时变化,默认值是空
3. 使用 vue3 setup script 语法

使用 AI 开发 Vue3 项目,ChatGPT 和 Copilot 能写出 90% 代码

最后再开发搜索组件。注意:通过 url 参数 keyword 进行搜索

使用 vue3 和 ElementPlus 写一个 input search 组件。要求:
1. 搜索时跳转到当前 path ,并加一个 query `?keyword=xxx` ,且保留现有的 url query
2. 实时监听 url query `keyword` 并讲内容显示到 input 中
3. 使用 vue3 setup script 语法

使用 AI 开发 Vue3 项目,ChatGPT 和 Copilot 能写出 90% 代码

初试 ChatGPT 写代码感觉整体效率非常高,超出预期

  • 只要能描述清楚需求,ChatGPT 会给你反馈不错的结果
  • 个别代码(如 CSS 样式)需要自己调整一下

注册/登录页(ChatGPT)

使用 AI 开发 Vue3 项目,ChatGPT 和 Copilot 能写出 90% 代码

给出详细需求,直接用 ChatGPT 生成表单代码

使用 vue3 和 ElementPlus 写一个注册页面,包含一个标题“注册新用户”和一个表单。要求:
1. 页面内容水平垂直居中
2. 注册表单包含:用户名(必填)、密码(必填)、确认密码、昵称、注册按钮
3. 注册表单要根据 item 数据类型设置校验规则
4. 使用 vue3 setup script 语法

使用 AI 开发 Vue3 项目,ChatGPT 和 Copilot 能写出 90% 代码

【注意】这次 ChatGPT 生成代码有 bug !!!
经过排查,原因在于 modelref 重复了。然后简单修改一下,即可正常运行。
还是要比自己从 0 手写快很多,它把模板、主要逻辑、表单校验,都给你写好了。
尤其是表单校验的规则,和正则表达式,自己写还得参考各种文档。

PS:AI 是你的助手,依然需要你有专业能力去解决问题。

博客列表(Copilot + ChatGPT)

先获取博客列表的数据。使用 Copilot,写出注释(如下图),回车换行,即可自动生成代码。非常便捷!
PS:生成效果可以参考 Copilot 官网 的动图

使用 AI 开发 Vue3 项目,ChatGPT 和 Copilot 能写出 90% 代码

在 Vue 模板中写注释 <!-- 遍历显示 blogList 的内容,每个 item 使用 div --> 会自动代码

使用 AI 开发 Vue3 项目,ChatGPT 和 Copilot 能写出 90% 代码

但是为了 UI 体验,我们会使用博客卡片来显示每条博客。
用 ChatGPT 帮助生成组件代码,写出详细的要求:

用 vue3 和 ElementPlus 写一个博客卡片组件(BlogCard.vue),用于在博客列表中显示单个博客信息
该组件接受一个属性 blog ,是一个 js 对象

该组件的 UI 分为上中下三层结构:
- 上层显示:博客作者(blog.author)并在前面加 icon ,分类(blog.category),时间(blog.updatedAt)
- 中层显示:博客标题(blog.title),博客简介(blog.summary),且点击标题跳转到 `/blog/:id`
- 下层显示:点赞数量(blog.likes),收藏数量(blog.favorites)、评论数量(blog.comments)。每个使用合适的 icon 来表示

还要求:
- 当鼠标 hover 卡片,设置浅灰色背景
- 点击卡片跳转到 `/blog/:id`
- CSS 样式要美观,可参考当前博客网站的样式
- 使用 vue3 setup script 语法

使用 AI 开发 Vue3 项目,ChatGPT 和 Copilot 能写出 90% 代码

它写的代码整体结构没问题,但还有一些细节不满足我的要求(我们不可能说清楚每一个细节)
然后我继续向它追问:

你的代码大部分写的很好。但有需要改动的地方:上层、下层的内容,都靠左显示,且内容之间要有间隔。

它又重新修改代码,这次效果就基本可以了。除了几个 CSS 样式需要自己调整一下。

博客详情页(Copilot)

使用 AI 开发 Vue3 项目,ChatGPT 和 Copilot 能写出 90% 代码

首先,获取博客详情页的数据。然后在模板中显示博客内容
使用 Copilot 根据注释生成代码即可,CSS 样式也可以自动生成。

使用 AI 开发 Vue3 项目,ChatGPT 和 Copilot 能写出 90% 代码

然后再使用 Copilot 生成点赞和收藏的代码逻辑。写出注释即可生成,非常强大!

使用 AI 开发 Vue3 项目,ChatGPT 和 Copilot 能写出 90% 代码

博客评论(Copilot)

使用 AI 开发 Vue3 项目,ChatGPT 和 Copilot 能写出 90% 代码

首先获取评论数据。然后使用 Copilot 写出注释,即可生成评论列表的模板和 CSS 。还可以继续让它根据条件渲染“删除”按钮。

使用 AI 开发 Vue3 项目,ChatGPT 和 Copilot 能写出 90% 代码

然后写出注释,让 Copilot 自动生成删除、发表评论的代码逻辑,还可以让它增加 confirm 验证。

使用 AI 开发 Vue3 项目,ChatGPT 和 Copilot 能写出 90% 代码

对于开发场景,感觉 Copilot 比 ChatGPT 更加好用一些。

封装网络请求(ChatGPT)

先封装 axios ,增加拦截器。ChatGPT 写的非常好,不用我们再去翻查文档。

我想用 axios 发送 ajax 请求,需要你帮助封装一下 axios 的各个常用功能
直接写出 js 代码示例

使用 AI 开发 Vue3 项目,ChatGPT 和 Copilot 能写出 90% 代码

再封装博客请求的 API ,直接使用上面封装的 axios 。

使用 AI 开发 Vue3 项目,ChatGPT 和 Copilot 能写出 90% 代码

其他工具函数(Copilot)

我想写一个日期时间格式化的函数。
可以直接写出注释,Copilot 会自动生成代码,非常方便。

使用 AI 开发 Vue3 项目,ChatGPT 和 Copilot 能写出 90% 代码

像这种工具函数是最适合用 AI 写的,它没有什么业务逻辑,输入输出比较规范,AI 生成一般不会有错误。

使用 ChatGPT 优化代码

可以把你写出来的代码,提交给 ChatGPT ,然它提出优化建议,并且给出优化后的代码。

下面是一个 vue3 组件的代码,使用了 ElementPlus 组件库。
你作为一名资深前端工程师,有什么优化建议吗?
1. 请结合代码,分条目指出建议
2. 请给出你优化后的代码

(贴上组件代码,使用 markdown 代码块格式)

使用 AI 开发 Vue3 项目,ChatGPT 和 Copilot 能写出 90% 代码

它提出的建议,不能全盘照搬,但也很值得参考。会有一些你想不到的内容。
我做这个项目采纳的优化建议有:

  • 使用 watch 代替 watchEffect ,减少监听范围
  • 简化表单校验逻辑,让代码更清晰
  • 使用 computed 缓存数据,避免重复计算
  • 拆分 submit 函数,减少一个函数的代码量

总结

有 AI 的加持,写代码会非常高效。90% 的代码都可以通过 AI 生成,一个人真可以顶多个人的效率。
我用的还是 GPT3.5 版本。如果付费使用 GPT4.0 以及使用未来的 CopilotX ,那效率会更高。

AI 普及真的可能会导致一部分人失业,尤其是那些日常只写 CRUD 、效率又不高的人。当然,这种人也应该不会去积极学习 AI 工具。
AI 仅仅是一个工具,它需要主人。让你失业的不是 AI ,而是你身边熟悉 AI 的同事。

Ad: 前端面试 1-1 咨询服务

本文作者(双越老师)是大厂资深面试官,多年讲解前端面试题,累计学员 5w+

如果你在准备前端面试,可私信我。可帮你:

  • 私人定制学习内容,找出复习重点
  • 优化简历,发掘个人亮点
  • 模拟面试,锻炼表达能力
本网站的内容主要来自互联网上的各种资源,仅供参考和信息分享之用,不代表本网站拥有相关版权或知识产权。如您认为内容侵犯您的权益,请联系我们,我们将尽快采取行动,包括删除或更正。
AI教程

讯飞星火大模型,全场景开放,助力程序员提升工作效率

2023-11-17 19:00:14

AI教程

为什么ChatGPT对话不用Websocket而使用EventSource?

2023-11-17 19:11:14

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索