引言
背景：前三篇文章分别使用Trae开发了新闻阅读应用的微信小程序版本、桌面Electron版本和跨端React Native版本。回头看我最早开发的web版本的新闻应用太不成型，是使用网上的tailwindcss组件随意拼凑的页面，再绑了几个接口的数据，当时只是随便写的项目，利用项目实操一下前端项目部署。现在有了Trae，打算用它重构一下我的新闻阅读Web端。
目的：利用AI IDE Trae来帮助我重构新闻阅读Web端，并实践使用shadcn/ui组件。
项目现状
UI展示：使用tainwind组件随意拼凑，新闻列表数据绑定了接口，页脚都是没有实际意义的内容。
技术栈选择：vue3+tailwindcss+shadcn-vue。当时也是为了尝试一下tailwindcss写样式，写出来起码样式不至于太丑。这次我们加入shadcn-vue。因为shadcn/ui是2024年度最受欢迎的开源项目，如此具有影响力和收大家喜欢的组件库，我们也该使用一下，感受一下它的魅力。
方案设计： 继续沿用之前的设计。
开发调试
1，第一个问题是：这个项目是一个新闻浏览网站 帮我根据设计图改造一下我的首页。并将设计图传给Trae AI，如下图：
这里它提供给我element-ui来实现轮播图，我期望使用shadcn-vue，所以又提问：我想使用shadcn/ui来作为我的组件库 然后实现轮播 可行吗。然后按照Trae AI的提示改造我的首页。
Trae AI在回答问题时，还会提示我们后续可以做什么，启发我们下一步的工作，如下图：
我还提问了以下问题来完善我的代码
- 我使用了shadcn 发现我的新闻项从圆角变成阴影了 怎么回事
- rounded-lg怎么没生效
- 根据现在的tailwind配置 想搞个圆角怎么写
- --radius的定义消失了 在哪定义合适
- 帮我优化一下页头的样式 不需要登陆注册功能了
- 帮我增加一个logo
- 我的移动端菜单被下面的轮播图挡住了 怎么调整
- 帮我改造OverviewList 它是新闻列表页
- 再帮我改造详情页
问题提了很多，都是根据项目实时的情况，已经我个人对于代码的不理解进行的提问，在Trae AI的答疑解惑和指导中完善了我的代码。
初步效果
UI展示：这回的UI完美的按照设计图的内容进行展示了，添加了logo，轮播图，修改了页脚组件。
完善功能
但现在的页面功能过于简单，我继续提问还可以添加什么功能吗，最好可以使用到shadcn组件。Trae AI回答说
- 首页可以添加文章分类功能——使用shadcn的tab组件。
- 列表页可以添加分页功能——使用shadcn的分页组件。
- 详情页可以添加评论功能、相关文章推荐——评论功能使用shadcn的button、toast组件。
- 页头组件可以添加搜索功能——使用shadcn的command组件。
- 图片懒加载——使用shadcn的骨架屏组件。
我就按照Trae AI给的提示继续向它提问，一步一步完善项目代码。
最终效果
UI展示：我们分别在首页、列表页、详情页添加了些内容，并成功了使用了shadcn组件。
源码地址
我将实现的新闻应用各端都上传到了gitee。
cms-rn-app: gitee.com/DaBuChen/cm…
cms-wechart-miniprogram: gitee.com/DaBuChen/cm…
cms-electron-vue: gitee.com/DaBuChen/cm…
cms-web-vue: gitee.com/DaBuChen/cm…
四个新闻阅读应用项目链接放在上面，服务端和管理端项目同样可以在我的gitee仓库中查看。
总结
Trae AI对我的学习和实践新技术产生了非常大的帮助，一项技术懂得再多API，也不如实际动手试试，产生了实际的效果，才会让你感觉自己真的会使用这项技术，并在日后的工作中用到它，使用Trae AI加快了这个学习实践的过程。
本篇文章展示了使用Trae编辑器重构我的web新闻网站。让我进一步学习使用tailwind和shadcn。
下一步计划：我们已经有了基于各种技术栈的新闻阅读应用，最后还打算实践一个基于nextjs的新闻阅读web端项目。
