前言AI 仅仅是一个东西，它需求主人让你赋闲的不是 AI ，而是你身边懂 AI 的搭档
最近 AI 很火爆，各种文章、视频介绍 AI 以及它的运用场景。我也观察了好久。
关于咱们开发人员来说，AI 能做的便是提效。即经过 AI 东西的加持，提高开发功率，让你一个人当 N 个人用。就像一辆汽车能够替代 N 辆马车。
于是，我就爽性开发了一个 Vue3 的小项目，从需求、规划、开发、优化，全程运用 AI 来操作，看看它究竟怎样？
成果大大超出了我的预期，AI 能高效、高质量的生成代码，且项目 90% 的代码都是经过 AI 生成的。大约 1-2 天，我就把这个项目给做完了。
运用 收拾需求
需求一般是 PM 来写，但我很想看一下 关于项目需求的理解才能和协助程度，所以也测验一下。
PS：即使咱们是开发人员，不需求写需求，但你还需求评定需求呢！（不能 PM 说干啥你就干啥）运用 剖析需求，会让你提出更好的评定主张。
需求纲要
把你的需求布景和意向写清楚，向 发问。
你是互联网职业一名资深的产品司理，现在主导规划一个博客产品的需求，
这个产品是面向编程技术人员的，例如简书、博客园、这种网站。
要求产品以博客功用为主，不要有其他无关功用。你来写这个产品的需求文档，先列出需求纲要。
能够看到它写出的需求是十分全面的，有些是自己都想不到的点。
这些需求不一定彻底适用，但具有很好的参阅价值。
需求细化
有了纲要以后，还能够持续发问一些需求细节，例如
根据上文，请具体描绘“博客管理” 部分的需求，按层级、条目列出
还能够让它根据需求规划出需求多少页面，以及每个页面的功用。这样发问
根据上文需求，你剖析需求多少个页面？每个页面都有哪些功用？按条目列出
有了 的加持，你会更快、更全面的完结项目需求。
运用 + 开发项目
以下功用，有的是 开发的，有的是 开发的，其实两者能够切换的，两者在生成代码时有些共性。我想同时体验两者的才能，所以混合运用了，仅供参阅。
顶部栏（）
先写一个左右结构的结构
写一个顶部导航栏组件，宽度 100% 。左右结构，左边是 logo ，右侧是“登录”链接
再开发导航菜单。注意：菜单要经过 url 参数 进行查找，以及激活
运用 vue3 和 ElementPlus 写一个菜单组件，包括：前端、Java、Python、小程序
要求如下：
1. 每个菜单点击时，都跳转到首页，并加一个 query `?category=xxx`
2. activeMenu 要根据 url query `category` 参数实时变化，默认值是空
3. 运用 vue3 setup script 语法
最终再开发查找组件。注意：经过 url 参数 进行查找
运用 vue3 和 ElementPlus 写一个 input search 组件。要求：
1. 查找时跳转到当时 path ，并加一个 query `?keyword=xxx` ，且保存现有的 url query
2. 实时监听 url query `keyword` 并讲内容显现到 input 中
3. 运用 vue3 setup script 语法
初试 写代码感觉整体功率十分高，超出预期
注册/登录页（）
给出具体需求，直接用 生成表单代码
运用 vue3 和 ElementPlus 写一个注册页面，包括一个标题“注册新用户”和一个表单。要求：
1. 页面内容水平笔直居中
2. 注册表单包括：用户名（必填）、暗码（必填）、确认暗码、昵称、注册按钮
3. 注册表单要根据 item 数据类型设置校验规则
4. 运用 vue3 setup script 语法
【注意】这次 生成代码有 bug ！！！
经过排查，原因在于 model 和 ref 重复了。然后简略修正一下，即可正常运转。
仍是要比自己从 0 手写快很多，它把模板、首要逻辑、表单校验，都给你写好了。
尤其是表单校验的规则，和正则表达式，自己写还得参阅各种文档。
PS：AI 是你的助手，仍然需求你有专业才能去解决问题。
博客列表（ + ）
先获取博客列表的数据。运用 ，写出注释（如下图），回车换行，即可主动生成代码。十分快捷！
PS：生成作用能够参阅 官网 的动图
在 Vue 模板中写注释 会主动代码
可是为了 UI 体验，咱们会运用博客卡片来显现每条博客。
用 协助生成组件代码，写出具体的要求：
用 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 款式需求自己调整一下。
博客详情页（）
首要，获取博客详情页的数据。然后在模板中显现博客内容。
运用 根据注释生成代码即可，CSS 款式也能够主动生成。
然后再运用 生成点赞和保藏的代码逻辑。写出注释即可生成，十分强壮！
博客谈论（）
首要获取谈论数据。然后运用 写出注释，即可生成谈论列表的模板和 CSS 。还能够持续让它根据条件烘托“删去”按钮。
然后写出注释，让 主动生成删去、宣布谈论的代码逻辑，还能够让它添加 验证。
关于开发场景，感觉 比 愈加好用一些。
封装网络恳求（）
先封装 axios ，添加拦截器。 写的十分好，不用咱们再去翻查文档。
我想用 axios 发送 ajax 恳求，需求你协助封装一下 axios 的各个常用功用
直接写出 js 代码示例
再封装博客恳求的 API ，直接运用上面封装的 axios 。
其他东西函数（）
我想写一个日期时间格局化的函数。能够直接写出注释， 会主动生成代码，十分便利。
像这种东西函数是最适合用 AI 写的，它没有什么业务逻辑，输入输出比较标准，AI 生成一般不会有错误。
运用 优化代码
能够把你写出来的代码，提交给 ，然它提出优化主张，并且给出优化后的代码。
下面是一个 vue3 组件的代码，运用了 ElementPlus 组件库。
你作为一名资深前端工程师，有什么优化主张吗？
1. 请结合代码，分条目指出主张
2. 请给出你优化后的代码
(贴上组件代码，运用 markdown 代码块格局）
它提出的主张，不能全盘照搬，但也很值得参阅。会有一些你想不到的内容。
我做这个项目采用的优化主张有：
总结
有 AI 的加持，写代码会十分高效。90% 的代码都能够经过 AI 生成，一个人真能够顶多个人的功率。
我用的仍是 GPT3.5 版本。假如付费运用 GPT4.0 以及运用未来的 ，那功率会更高。
AI 遍及真的可能会导致一部分人赋闲，尤其是那些日常只写 CRUD 、功率又不高的人。当然，这种人也应该不会去活跃学习 AI 东西。
AI 仅仅是一个东西，它需求主人。让你赋闲的不是 AI ，而是你身边了解 AI 的搭档。
当然，AI 也不是说用就用的，看似是简略的聊天、写注释，但它却有很多的技巧和进程。
最终，想了解这个项目的具体开发进程，欢迎私聊和我沟通~
相关文章
