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

前言

1. AI 仅仅是一个东西，它需求主人
2. 让你赋闲的不是 AI ，而是你身边懂 AI 的搭档

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

关于咱们开发人员来说，AI 能做的便是提效。即经过 AI 东西的加持，提高开发功率，让你一个人当 N 个人用。就像一辆汽车能够替代 N 辆马车。

于是，我就爽性开发了一个 Vue3 的小项目，从需求、规划、开发、优化，全程运用 AI 来操作，看看它究竟怎样？

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

运用 ChatGPT 收拾需求

需求一般是 PM 来写，但我很想看一下 ChatGPT 关于项目需求的理解才能和协助程度，所以也测验一下。

PS：即使咱们是开发人员，不需求写需求，但你还需求评定需求呢！（不能 PM 说干啥你就干啥）运用 ChatGPT 剖析需求，会让你提出更好的评定主张。

需求纲要

把你的需求布景和意向写清楚，向 ChatGPT 发问。

你是互联网职业一名资深的产品司理，现在主导规划一个博客产品的需求，
这个产品是面向编程技术人员的，例如简书、博客园、这种网站。
要求产品以博客功用为主，不要有其他无关功用。你来写这个产品的需求文档，先列出需求纲要。

能够看到它写出的需求是十分全面的，有些是自己都想不到的点。
这些需求不一定彻底适用，但具有很好的参阅价值。

需求细化

有了纲要以后，还能够持续发问一些需求细节，例如

根据上文，请具体描绘“博客管理” 部分的需求，按层级、条目列出

还能够让它根据需求规划出需求多少页面，以及每个页面的功用。这样发问

根据上文需求，你剖析需求多少个页面？每个页面都有哪些功用？按条目列出

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

运用 ChatGPT + Copilot 开发项目

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

顶部栏（ChatGPT）

先写一个左右结构的结构

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

再开发导航菜单。注意：菜单要经过 url 参数 category 进行查找，以及激活 activeMenu

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

最终再开发查找组件。注意：经过 url 参数 keyword 进行查找

运用 vue3 和 ElementPlus 写一个 input search 组件。要求：
1. 查找时跳转到当时 path ，并加一个 query `?keyword=xxx` ，且保存现有的 url query
2. 实时监听 url query `keyword` 并讲内容显现到 input 中
3. 运用 vue3 setup script 语法

初试 ChatGPT 写代码感觉整体功率十分高，超出预期

• 只要能描绘清楚需求，ChatGPT 会给你反馈不错的成果
• 单个代码（如 CSS 款式）需求自己调整一下

注册/登录页（ChatGPT）

给出具体需求，直接用 ChatGPT 生成表单代码

运用 vue3 和 ElementPlus 写一个注册页面，包括一个标题“注册新用户”和一个表单。要求：
1. 页面内容水平笔直居中
2. 注册表单包括：用户名（必填）、暗码（必填）、确认暗码、昵称、注册按钮
3. 注册表单要根据 item 数据类型设置校验规则
4. 运用 vue3 setup script 语法

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

PS：AI 是你的助手，仍然需求你有专业才能去解决问题。

博客列表（Copilot + ChatGPT）

先获取博客列表的数据。运用 Copilot，写出注释（如下图），回车换行，即可主动生成代码。十分快捷！
PS：生成作用能够参阅 Copilot 官网 的动图

在 Vue 模板中写注释 <!-- 遍历显现 blogList 的内容，每个 item 运用 div --> 会主动代码

可是为了 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 语法

它写的代码整体结构没问题，但还有一些细节不满足我的要求（咱们不可能说清楚每一个细节）
然后我持续向它诘问：

你的代码大部分写的很好。但有需求改动的地方：上层、基层的内容，都靠左显现，且内容之间要有距离。

它又从头修正代码，这次作用就根本能够了。除了几个 CSS 款式需求自己调整一下。

博客详情页（Copilot）

首要，获取博客详情页的数据。然后在模板中显现博客内容。
运用 Copilot 根据注释生成代码即可，CSS 款式也能够主动生成。

然后再运用 Copilot 生成点赞和保藏的代码逻辑。写出注释即可生成，十分强壮！

博客谈论（Copilot）

首要获取谈论数据。然后运用 Copilot 写出注释，即可生成谈论列表的模板和 CSS 。还能够持续让它根据条件烘托“删去”按钮。

然后写出注释，让 Copilot 主动生成删去、宣布谈论的代码逻辑，还能够让它添加 confirm 验证。

关于开发场景，感觉 Copilot 比 ChatGPT 愈加好用一些。

封装网络恳求（ChatGPT）

先封装 axios ，添加拦截器。ChatGPT 写的十分好，不用咱们再去翻查文档。

我想用 axios 发送 ajax 恳求，需求你协助封装一下 axios 的各个常用功用
直接写出 js 代码示例

再封装博客恳求的 API ，直接运用上面封装的 axios 。

其他东西函数（Copilot）

我想写一个日期时间格局化的函数。 能够直接写出注释，Copilot 会主动生成代码，十分便利。

像这种东西函数是最适合用 AI 写的，它没有什么业务逻辑，输入输出比较标准，AI 生成一般不会有错误。

运用 ChatGPT 优化代码

能够把你写出来的代码，提交给 ChatGPT ，然它提出优化主张，并且给出优化后的代码。

下面是一个 vue3 组件的代码，运用了 ElementPlus 组件库。
你作为一名资深前端工程师，有什么优化主张吗？
1. 请结合代码，分条目指出主张
2. 请给出你优化后的代码
(贴上组件代码，运用 markdown 代码块格局）

它提出的主张，不能全盘照搬，但也很值得参阅。会有一些你想不到的内容。
我做这个项目采用的优化主张有：

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

总结

有 AI 的加持，写代码会十分高效。90% 的代码都能够经过 AI 生成，一个人真能够顶多个人的功率。
我用的仍是 GPT3.5 版本。假如付费运用 GPT4.0 以及运用未来的 CopilotX ，那功率会更高。

AI 遍及真的可能会导致一部分人赋闲，尤其是那些日常只写 CRUD 、功率又不高的人。当然，这种人也应该不会去活跃学习 AI 东西。
AI 仅仅是一个东西，它需求主人。让你赋闲的不是 AI ，而是你身边了解 AI 的搭档。

当然，AI 也不是说用就用的，看似是简略的聊天、写注释，但它却有很多的技巧和进程。
最终，想了解这个项目的具体开发进程，欢迎私聊和我沟通~