使用 整理需求

需求一般是 PM 來寫，但我很想看一下 對于項目需求的理解能力和幫助程度，所以也嘗試一下。

PS：即便我們是開發人員，不需要寫需求，但你還需要評審需求呢！（不能 PM 說干啥你就干啥）使用 分析需求chatgpt寫代碼能力，會讓你提出更好的評審建議。

需求大綱

把你的需求背景和意向寫清楚，向 提問。

你是互聯網行業一名資深的產品經理，現在主導設計一個博客產品的需求，
這個產品是面向編程技術人員的，例如簡書、博客園、掘金這種網站。
要求產品以博客功能為主，不要有其他無關功能。你來寫這個產品的需求文檔，先列出需求大綱。

可以看到它寫出的需求是非常全面的，有些是自己都想不到的點。

這些需求不一定完全適用，但具有很好的參考價值。

需求細化

有了大綱以后，還可以繼續提問一些需求細節，例如

根據上文，請詳細描述“博客管理” 部分的需求，按層級、條目列出

還可以讓它根據需求設計出需要多少頁面，以及每個頁面的功能。這樣提問

根據上文需求，你分析需要多少個頁面？每個頁面都有哪些功能？按條目列出

有了 的加持，你會更快、更全面的完成項目需求。

使用 + 開發項目

以下功能，有的是 開發的，有的是 開發的chatgpt寫代碼能力，其實兩者可以切換的，兩者在生成代碼時有些共性。我想同時體驗兩者的能力chatgpt寫代碼能力，所以混合使用了，僅供參考。

頂部欄（）

先寫一個左右結構的框架

寫一個頂部導航欄組件，寬度 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 ?。?！

經過排查，原因在于 和 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 樣式也可以自動生成。

然后再使用 生成點贊和收藏的代碼邏輯。寫出注釋即可生成，非常強大！

免責聲明：本文系轉載，版權歸原作者所有；旨在傳遞信息，不代表本站的觀點和立場和對其真實性負責。如需轉載，請聯系原作者。如果來源標注有誤或侵犯了您的合法權益或者其他問題不想在本站發布，來信即刪。