引言：
作為一名在IT行業(yè)算是“安穩(wěn)度日”的小小前端，如今感受到了大環(huán)境下的改革（AI時代編程就這樣悄然而至了），為了吃飽喝足的快樂生活，我決定繼續(xù)開始記錄學習AI的過程，加油吧，牛馬們！
讓我們先看看這兩個世紀編程的演變
- 20世紀末：程序員通過記事本寫代碼
- 2000年后：IDE編程時代（集成開發(fā)環(huán)境進行編寫代碼）
- 當下：AI工具高校編程
（用戶輸入 -> 前端請求 -> 后端處理 -> AI模型 -> 返回響應 -> 前端渲染）
再了解一下AI相關術語吧
AI術語
1、人工智能（AI） 是指計算機系統(tǒng)模擬人類智能行為的能力，例如學習、推理或解決問題。
2、機器學習（ML） 是AI的一個子集，側(cè)重于開發(fā)算法，使計算機能夠從數(shù)據(jù)中學習并改進性能，而無需顯式編程。
3、深度學習 是機器學習的一種方法，通過人工神經(jīng)網(wǎng)絡的多層結(jié)構(gòu)處理復雜模式，如圖像或語音識別。
4、自然語言處理（NLP） 專注于讓計算機理解、生成和互動人類語言，應用于聊天機器人或翻譯工具。
5、生成式AI 利用模型（如大型語言模型）創(chuàng)建新內(nèi)容，例如文本、圖像或音樂，常用于創(chuàng)意設計或自動化寫作。
6、通用人工智能（AGI） 是指具備人類水平通用智能的AI，能夠跨領域自主學習和解決各種問題，目前仍處于理論研究階段。
7、強人工智能 與AGI密切相關，強調(diào)AI系統(tǒng)可能擁有自我意識和類人理解能力，但這一概念在學術界存在爭議。
目前國內(nèi)外主流的AI模型
1、國內(nèi)-豆包（產(chǎn)自：字節(jié)跳動），MOE（混合專家：https://baike.baidu.com/item/混合專家模型/65370159）架構(gòu)，UltraMem（百度百科地址：https://baike.baidu.com/item/UltraMem/65394590）效率優(yōu)化。
目前主要應用：豆包APP、即夢APP、火山引擎等
2、國內(nèi)-通義千問（產(chǎn)自：阿里巴巴），MOE結(jié)合“快思考、慢思考”架構(gòu)（快思考基于直覺和情感，消耗算力極少，適合處理日常簡單任務如寒暄回復；慢思考則涉及邏輯推理、復雜計算和批判性思考，需要多步驟深度分析，但算力消耗較高）。
Qwen3-Coder：主打一個絲滑編程（改天試試：https://chat.qwen.ai）
目前主要應用：淘寶、釘釘
3、國內(nèi)-DeepSeek（產(chǎn)自：深度求索），MOE模型，深度探索+注意力機制
4、國外-GPT模型（3/4/4o/5）（產(chǎn)自：美國OpenAI），Transformer解碼器（百度百科地址：https://baike.baidu.com/item/Transformer模型架構(gòu)/64430120?fr=aladdin）
5、國外-Gemini（1/1.5/2/2.5/3）（產(chǎn)自：谷歌DeepMind，地址：https://baike.baidu.com/item/Gemini/63729669），Transformer架構(gòu)，蘋果將使用該模型改版Siri?。?！
6、國外-Claude（產(chǎn)自：美國Anthropic），Constitutional AI訓練模型（地址：https://baike.baidu.com/item/Anthropic/62639515?fromModule=lemma_inlink），2025年9月正式發(fā)布Claude Sonnet 4.5，官方稱其為“世界上最好的編程模型”
上面是簡單的AI介紹，從現(xiàn)在開始我們就要進入真正的實戰(zhàn)AI項目
項目背景：AI時代，覆蓋從產(chǎn)品交互設計、前端vue開發(fā)、后端node、數(shù)據(jù)庫Mysql、AI大模型對接等功能的項目
第一步：項目原型設計
- AI時代，推薦一款設計工具，MasterGo（官網(wǎng)地址）
- 點擊進入官網(wǎng)，登錄注冊后點擊設計，進入到編輯頁面，可以在導航條上看到AI圖標，點擊AI圖標，可以輸入自己的需求提示詞（大家可以隨意嘗試一下）。
- 編寫設計提示的核心要素：
（1）明確核心：產(chǎn)品的類型+風格+主色調(diào)
（2）分區(qū)拆解：如導航、側(cè)邊欄、聊天區(qū)域、底部輸入框
（3）區(qū)域細節(jié)：頂部導航條的具體元素內(nèi)容
（4）視覺細節(jié)：顏色、尺寸、間距等
（5）功能交互說明：下鉆、懸停等 -
一個好的提示詞是生成優(yōu)質(zhì)AI設計圖的關鍵，我把本項目的提示詞放到最后面供大家嘗試，操作以及生成效果如下圖所示：
image.png
image.png
第二步：學習VUE3.5
本次實戰(zhàn)需要用VUE3.5，附上vue3.5學習筆記
VUE3.5學習筆記
附錄一：UI設計圖的提示詞
一、AI 聊天網(wǎng)頁界面設計
生成一款 現(xiàn)代簡約風格的「AI 聊天網(wǎng)頁界面」，嚴格遵循以下規(guī)范：
- 全局樣式
?主色：珊瑚橙 #FF7F50
?所有按鈕與卡片圓角：10 px
- 頁面區(qū)塊與尺寸
1.頂部導航欄?高度 70 px
2.左側(cè)邊欄 寬度 300 px
3.主聊天區(qū) 居中自適應寬度
4.右側(cè)功能區(qū)
?固定浮窗寬 60 px，高120px，半透明白背景
?側(cè)欄面板寬 320 px（默認隱藏，點擊浮窗按鈕滑入）
1.底部固定輸入?yún)^(qū)?多行文本域 + 發(fā)送按鈕（主色，圓角 10 px）
- 具體布局與交互
3.1 頂部導航欄
?最左：Logo + 項目名 “智能匯 AI”
?左側(cè) Tab（左緣與邊欄右緣對齊）
a.聊天室 ——默認高亮，淡橙背景
b.筆記本
c.AI 畫室
每個 Tab 添加小圖標
?最右：用戶信息（圓形頭像 + 用戶名），支持下拉個人中心
3.2 左側(cè)邊欄
?頂部居中按鈕 “新建對話”（淡色填充，珊瑚橙虛線邊框）
?按鈕右側(cè)放折疊/展開圖標
?下方對話列表（時間倒序）
?默認：圖標 + 標題 + 時間
?懸停：時間隱藏 → 顯示 “編輯 / 下載 / 刪除” 三圖標
3.3 主聊天區(qū)
?氣泡式排版居中
?用戶消息：左對齊，用戶頭像 + 主色氣泡
?AI 消息：左對齊，AI 頭像 + 白底淺灰邊框氣泡
?每條 AI 氣泡左下放 4 個功能按鈕：復制、朗讀、收藏、下載
3.4 右側(cè)功能區(qū)
1.固定小浮窗（高120px,寬40）
?垂直排列兩個 40 × 40 px 圖標按鈕：「我的」「問答」
1.側(cè)欄（互斥顯示）
?我的提示詞面板（點擊「我的」按鈕滑入）
?頂部：40 px 高搜索框（回車搜索）+ 同行主色「新建」按鈕
?分組小按鈕區(qū)（可新建 / 刪除分組；點擊篩選提示詞）
?下方卡片式提示詞列表（懸停顯 編輯 / 刪除）
?問答面板（點擊「問答」按鈕居中彈窗）
?頂部：40 px 高搜索框
?下方折疊面板：問題展開，答案默認折疊
?彈窗寬度為視口 60%，右上配灰色圓形關閉按鈕
3.5 底部輸入?yún)^(qū)
?自適應多行文本域，灰色占位提示
?右側(cè)垂直居中 “發(fā)送” 按鈕（主色填充，圓角 10 px）
二、筆記本界面設計
刪除AI聊天原先的對話氣泡區(qū)域、底部輸入框以及右側(cè)固定浮窗。
（二）頁面布局
- 頂部導航欄
?Tab 默認選中「筆記本」，高亮樣式沿用主色文字 + 淡橙背景。
- 左側(cè)邊欄（筆記管理）
?按鈕替換：將頂部「新建對話」改為「新建筆記」，樣式不變；
?新增搜索框：在按鈕下方新增 1 行搜索框，用于按關鍵詞檢索筆記；
?分割線：搜索框下方添加淺灰分割線；
?筆記列表：按創(chuàng)建時間倒序排列，每條僅顯示「筆記標題」與「創(chuàng)建時間」，點擊列表項可切換查看對應筆記內(nèi)容。
- 主編輯區(qū)域
?頂部工具欄（高度 60px）：
?左側(cè)并列放置保存按鈕、導出按鈕；
?右側(cè)并列放置潤色、擴寫、翻譯按鈕；所有按鈕采用簡約小按鈕風格；
富文本編輯器：占據(jù)除工具欄外的全部可視空間，上方自帶文本格式化工具條，支持實時編輯與光標定位。
三、AI 繪畫界面設計
沿用 AI 聊天界面風格，聚焦繪畫功能。
（二）頁面布局
- 頂部導航欄
?版式沿用原布局；
?將 Tab 默認高亮設置為「AI 繪畫」。
- 左側(cè)邊欄（繪畫管理）
?頂部按鈕替換為「新建繪畫」，其樣式與原 “新建對話” 一致；
?下方列表顯示已生成的繪畫記錄：按創(chuàng)建時間倒序排列，每條條目展示「繪畫標題」與「創(chuàng)建時間」；點擊條目可切換并在主聊天區(qū)查看對應的繪畫對話。
- 主聊天區(qū)（對話生成圖片）
?保持原對話氣泡布局：左側(cè)為用戶提問，AI 回復位置不變；
?AI 回復內(nèi)容改為圖片（而非文本）；
?鼠標懸停圖片時，在圖片上方浮現(xiàn)下載與收藏圖標按鈕；
?用戶可繼續(xù)輸入指令對圖片進行 “再次修改”，新圖片會依次追加到對話中。
- 底部輸入?yún)^(qū)域
?輸入框保持不變；
?在輸入框正上方水平并列三個下拉框：
?圖片尺寸（例如：512×512、1024×1024…）；
?繪畫風格（如：卡通、油畫、賽博朋克…）；
?生成張數(shù)（1 - 4 張）。
- 右側(cè)功能區(qū)
?原固定浮窗替換為單個收藏圖標按鈕；
?點擊該按鈕彈出圖片收藏彈窗：內(nèi)部使用瀑布流排列已收藏圖片；圖片懸停時顯示下載與刪除操作按鈕。
