新闻详情

新闻详情

首页 / 资讯中心 / 详情

十年前端第一次用 Trae 生成 Vue3 页面:被震撼之后,我重新理解了「前端」这两个字

发布时间:2026/9/28 4:40:14来源:尧图网络
十年前端第一次用 Trae 生成 Vue3 页面:被震撼之后,我重新理解了「前端」这两个字
这是「十年前端转 AI」系列的第一篇。 上一篇文章我写了整体学习路线图这一篇我想聊聊我第一次用 AI 真正「生成一个能跑的 Vue3 页面」的真实体验。 不是广告不是测评是一个老前端被工具按在地上摩擦之后的复盘。一、先说那个「被震撼」的瞬间那天晚上十一点半我在 Trae 里敲下了第一句话「帮我做一个深色风格的 AI 聊天首页要有输入框、消息气泡、侧边栏用 Vue3 script setup Tailwind」回车。大概 20 秒后一套完整的 Vue3 工程出现在我右边。不是单文件代码块是一整个能直接npm run dev跑起来的项目Sidebar.vue、MessageList.vue、MessageBubble.vue、ChatInput.vue拆得清清楚楚用了script setup langts Composition APIv-model双向绑定、v-for渲染消息、computed处理过滤深色主题、气泡样式、输入框回车发送、Shift回车换行甚至连「消息加载中」的三点动画都写好了我盯着屏幕看了很久。十年了我从 Vue2 的options API走到 Vue3 的script setup从 Webpack 3 走到 Vite从 Element UI 走到 Naive UI Tailwind。这种「主页 输入框 消息列表」的界面我闭着眼都能写。十年经验在这一刻被 20 秒的等待狠狠晃了一下。这就是我今天想认真聊的事。不是「AI 多牛」这种废话而是当一个十年经验的 Vue 前端第一次被 AI 生成代码震撼之后我到底该怎么理解自己的定位二、我为什么选择 Trae而不是 Cursor说句实话一开始我是在用 Cursor 的。但后来我切到了 Trae原因很朴素1. 中文语境更顺。我用中文写 Prompt它对中文文案、变量命名、注释表达都更懂。尤其是在生成 UI 文案的时候不会出现那种「一看就是从英文硬翻过来」的别扭感。2. 对新手更友好。Cursor 很多东西还需要你自己琢磨Trae 开箱即用。作为一个 AI 应用开发小白我第一步需要的是正反馈不是配置地狱。3. Builder 模式真的能出成品。这是我最惊喜的地方。它不是只补全代码而是真的给你搭一个能跑的 Vue3 工程——文件结构、依赖、路由、组件、样式一次给齐。我并不是说 Trae 比 Cursor 强。我是说对「第一次接触 AI 编程」的人来说Trae 的门槛更低反馈更快。三、我的第一个 Prompt以及它教会我的第一件事我用的第一个 Prompt现在回头看其实写得不算好但已经足够让 Trae 输出一个能用的东西帮我用 Vue3 TypeScript Tailwind CSS 做一个 AI 聊天页面要求 1. 使用 script setup langts 语法不要用 Options API 2. 深色主题现代简洁风格 3. 左侧是会话列表侧边栏可以新建会话 4. 中间是消息列表用户消息靠右AI 消息靠左 5. 底部是输入框支持回车发送、Shift回车换行 6. 消息内容支持 Markdown 渲染 7. 先用假数据 mock先不接 API 8. 组件拆分清楚不要把所有东西塞一个文件它给我的结果我概括成三点第一结构比我预期干净。它不是把所有东西塞一个文件而是拆成了Sidebar.vue、MessageList.vue、MessageBubble.vue、ChatInput.vue还配套了types/index.ts做类型定义。这个拆分方式和我自己写的时候一模一样。第二它默认就考虑了交互细节。比如「Shift回车换行」、「输入框自动聚焦」、「消息列表自动滚到底部」这些细节它主动用了nextTickscrollIntoView处理。我本来以为需要我强调第二次。第三它给的 mock 数据是真的能用。不是// TODO是几段像样的 AI 对话示例。你npm run dev打开浏览器就能看到效果。那一刻我的真实感受是AI 已经能完成一个「中级 Vue 前端」的工作量而且是在我没写任何代码的情况下。但别急接下来就是重点了——它并不完美。四、我踩过的 6 个坑这部分最值得看第一次生成我兴奋了两分钟然后就开始遇到问题。这部分教程里很少有人说但这才是真正有价值的地方。坑 1AI 默认老想给你写 Options API即使我在 Prompt 里强调了script setup第一版生成里还是有一个子组件混进了 Options API 的写法——export default { props: {...}, methods: {...} }。Vue3 生态现在已经全面script setup化了AI 训练数据里 Options API 的量太大它很容易「倒回去」。仔细看一眼每个文件的开头是必须要做的事。坑 2样式「看起来对」但细节处处别扭它给的深色主题颜色是对的但间距很怪。消息气泡之间的gap太大输入框距离底部的padding不够侧边栏在移动端直接挤没了。结论AI 能给你「大概对」的视觉但「像素级体验」仍然是你的事。这就是前端十年的价值所在。坑 3它默认引入了你没要求的依赖我只说了 Vue3 Tailwind它自己引入了lucide-vue-next图标库markdown-itMarkdown 渲染vueuse/coreVue 生态常用工具集依赖本身没问题但如果你不问清楚你根本不知道自己的项目引入了什么。我第一次生成完第一件事就是打开package.json从头读一遍。坑 4Markdown 渲染有 XSS 风险它用了markdown-it但没加DOMPurify。这意味着如果 AI 返回的内容里带script或img onerror会有 XSS 风险。正确姿势应该是import MarkdownIt from markdown-it import DOMPurify from dompurify const md new MarkdownIt() const html computed(() DOMPurify.sanitize(md.render(raw.value)))AI 生成代码的第一大坑就是安全问题它默认不管。需要你自己补。坑 5状态管理是「能用」但不是「可扩展」它用ref([])管消息列表、ref()管当前会话这在 demo 里没问题。但真实场景下你要处理会话切换、消息持久化、流式追加、错误重试、上下文裁剪——这时候局部ref立刻就崩了双组件之间到处传 props、emit 事件。AI 给你的是 demo 级的架构不是生产级的架构。一个真实的 AI 聊天应用起码要上Pinia把「会话、消息、流式状态」拆到不同的 store 里。这是它目前最大的局限。坑 6我差点就「不会写代码了」这是最可怕的坑。生成出来的代码太顺滑了顺滑到你不想去改它只想让它继续生成。生成两次以后我发现自己开始写不出「从零搭一个组件」的耐心了。这很危险。AI 让你变快但会让你变懒。这是我给自己的最大警告。五、我总结的「AI 生成 Vue3 页面」正确用法踩完上面这些坑我整理出我自己的使用原则。分享给你1. 先让它生成「骨架」不要让它生成「全部」。一个页面我会分三步给它第一步生成整体结构和布局第二步生成核心交互逻辑v-model、事件、状态第三步生成样式细节一次给太多它反而抓不住重点。2. Prompt 里一定要写「不要做什么」。比如- 不要用 Options API全程 script setup langts - 不要引入额外的 UI 组件库不要 Element Plus、不要 Naive UI - 不要用 any 类型 - 不要写 TODO 占位 - 所有样式用 Tailwind不要写 style 块里的自定义 class除非必要 - 全局状态请用 Pinia不要用 provide/inject 硬凑AI 默认会「加戏」。你不约束它它就会引入一堆你不需要的东西。3. 每个生成结果必须自己从头读一遍。不是为了改是为了理解。尤其是 Vue3 的ref/reactive边界AI 有时候会搞混。不读一遍出了问题你都不知道从哪查。4. 关键路径自己写辅助路径交给 AI。状态管理Pinia 的 store 设计、数据流、错误处理、流式响应处理——自己写。样板组件、样式变体、类型定义、v-for列表渲染——交给 AI。这个分工我用下来效率最高。5. 把 AI 当「结对编程的搭档」不是「外包」。你不会把整个项目外包给一个不熟悉你业务的团队也不该把整个项目甩给 AI。它需要你的上下文、你的判断、你的品味。六、真正让我清醒的一件事用了两周 Trae 之后我做了个测试用 AI 生成的 Vue3 页面和我不加任何 AI 手写的页面做一个对比。结果让我有点意外「能跑的页面」AI 快 5 倍。「能上线的页面」差距缩到 1.5 倍。「能长期维护的页面」几乎没有差距。为什么因为从「能跑」到「能上线」这一段全是脏活边界情况、错误处理、空状态、加载状态、移动端适配、无障碍、性能、埋点、降级、SSR 兼容……这些 AI 目前帮不了你太多。而从「能上线」到「能维护」就是架构、抽象、规范、协作——这些完全是工程师的活。所以我的结论是AI 正在快速吃掉「堆代码」这部分工作但「设计系统」和「做决策」这部分短期内它替不了你。这对纯执行型的前端是坏消息对有判断力、有品味、懂系统的前端反而是好消息。七、写给和我一样焦虑的 Vue 前端如果你也是 Vue 前端看到 AI 能生成页面就开始心慌我想跟你说几句真心话。第一先真的去用它别只是听说。我一开始也焦虑但真上手用了两周之后焦虑反而少了。因为你只有真用了才知道它的边界在哪。光看别人演示你只会越来越慌。第二把你最擅长的事做得更深。AI 会写组件但 AI 不会判断这个组件该不该拆、这个状态该放 Pinia 还是本地 ref、这个交互该不该有。这些是经验问题是判断力问题。这恰好是十年经验的你最值钱的地方。第三把 AI 当成你的「实习生」。你会怎么带一个聪明的实习生给方向、给边界、给 review。你会的。带 AI 也是这个逻辑。第四主动去学 AI 应用开发别只学 AI 工具。会「用 Trae 生成 Vue 页面」不叫转行。能设计一个 RAG、能搭一个 Agent、能处理 AI 的不确定性那才叫转。这也是我下一篇要写的东西。八、我的下一步这一篇是我「十年前端转 AI」的第二个脚印。第一篇是路线图这一篇是第一次动手。接下来我打算写这几篇从 0 到 1用 Trae 搭一个带流式输出的 Vue3 AI 聊天页含完整 Prompt 拆解 SSE 处理AI 生成 Vue3 代码的 10 个坑我逐个帮你踩过手写一个最小 RAG不依赖任何框架Vue3 做 AI 应用Pinia 该怎么重新设计 store我对比过的 8 个 AI IDE / AI 编程工具如果你也是 Vue 开发者刚开始用 AI 写代码欢迎在评论区说说你踩过什么坑。我们互相补课比看十篇爽文都有用。最后一句送给所有正在犹豫要不要学 AI 的 Vue 前端你不需要跑得比 AI 快。你只需要跑得比「还在观望的自己」快一点。下一篇见。
网站建设高端定制企业官网
RELATED

相关资讯

更多精彩内容,欢迎继续阅读

较早相关资讯

最新相关资讯

成人和小孩检测数据集实战:从1738张YOLOv9标注到70.9%识别率提升 2026/9/28 5:44:48

成人和小孩检测数据集实战:从1738张YOLOv9标注到70.9%识别率提升

简介:这份成人与小孩图像数据集面向计算机视觉入门与目标检测实践者,尤其适合正在做YOLO系列模型训练、需要二分类人物属性识别素材的开发者与学习者。数据集共1738张原始图片,全部按yolov9格式完成标注,可直接接入YOLOv9训练流程…

阅读更多 →
SpringBoot+Vue招聘系统全栈实战:从权限设计到部署上线 2026/9/28 5:44:47

SpringBoot+Vue招聘系统全栈实战:从权限设计到部署上线

1. 毕设选题为什么要做招聘系统:一个既稳又耐打的全栈练手项目每年到毕设季,我都能收到一堆私信,问的大多是同一个问题:市面上那么多开源项目,电商、博客、商城、后台管理系统到处都是,为什么我建议做招聘平…

阅读更多 →
Python外卖配送数据分析与可视化系统:从数据清洗到ECharts大屏全流程 2026/9/28 5:44:46

Python外卖配送数据分析与可视化系统:从数据清洗到ECharts大屏全流程

又到毕业设计选题的时候了,后台天天有人问“外卖配送分析”这类题目怎么做。外卖配送确实是Python毕设里的常青树——业务场景好理解、数据维度丰富、可视化展示又直观,最关键的是整套流程踩中数据分析的所有核心环节:采集、清洗、建模、统计…

阅读更多 →
从IP地址入手排查线上故障:一次完整链路追踪复盘 2026/9/28 5:44:46

从IP地址入手排查线上故障:一次完整链路追踪复盘

凌晨两点四十,手机连着震了十几次,我爬起来看了一眼告警群:线上服务成功率掉到65%,响应时间已经逼近十秒,持续了快二十分钟。我第一反应不是打开日志追堆栈,而是先问了句自己——现在进来的流量&#xff0c…

阅读更多 →
3步搞定wordpress时间归档,一文搞懂防黑优化全攻略 2026/9/28 5:44:45

3步搞定wordpress时间归档,一文搞懂防黑优化全攻略

3步搞定wordpress时间归档,一文搞懂防黑优化全攻略 网站被黑挂马不知道怎么办?别慌,这种“中招”后的慌乱感,我见过太多新手站长。往往页面突然多出一堆乱七八糟的广告链接,或者被360、百度直接标记为“含有非法信息”,流量瞬间归零。这时…

阅读更多 →
从VS Code、Vim到Emacs:为什么这个近四十年编辑器仍值得学 2026/9/28 5:44:26

从VS Code、Vim到Emacs:为什么这个近四十年编辑器仍值得学

"还在学Emacs?那不是一个上世纪的东西吗?"这是我在技术交流群里反复听到的话,也是每次有人看到我的工作环境时最常给出的反应。作为一个用了十年Emacs、中间反复横跳过Vim和VS Code、最后还是回到Emacs常驻的深度用户,今…

阅读更多 →

今日资讯

本周资讯

本月资讯

看完文章仍有疑问?

联系尧图顾问,获取一对一建站咨询

立即免费咨询 📞 400-888-8888
📞 ✉