网站编辑器无法显示刚刚济南发通知
引言：为什么要用AI来进行快速构建
在快节奏的前端开发中，效率和质量往往是团队的核心诉求。传统的开发方式需要手动搭建项目结构、编写重复逻辑、调试接口数据，而AI的引入可以显著减少这些低价值劳动，让开发者更专注于业务逻辑和用户体验。
本次使用trae来自动调用上下文以及大模型。
建立目录结构
目录结构的建立是第一步，比如需要使用vue3构建项目，只需询问如何建立一个vue3项目，根据它给的命令进行建立，大致目录结构如下：
页面拆分
首先页面的设计是关键，进行合理的页面拆分是进行ai任务分解的关键，比如一个题目后台管理功能，它可以分为一个主要的展示页面和几个对话框，子页面包括了题目编辑，添加等。首先把系统拆分成一个个页面，让AI先把每个页面都建立一个view，如果每个页面的代码量过大，再把view进行组件拆分。
组件拆分触发条件
| 指标 | 拆分建议 |
|---|---|
| 代码行数 > 300 | 必须拆分子组件 |
| 重复代码出现2次以上 | 抽离为公共组件 |
建立路由
这一步可以和页面拆分并行，每建立一个页面就在createRouter函数中加入它，并测试一下页面的跳转是否正确。可以让AI写全局路由守卫，实现强制登录认证功能。。
引入工具
pinia状态管理，element-plus都是很好的中间工具，我们把它注册进main.ts。
import './assets/main.css'import { createApp } from 'vue'
import { createPinia } from 'pinia'import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'const app = createApp(App)
app.use(ElementPlus)
app.use(createPinia())
app.use(router)app.mount('#app')
导入API
在api目录中，新建几个文件用于封装后端的API,把后端的API文档给AI，让AI帮你自动生成相应的API请求，如果有错误就自己微调一下。需要注意的是，最好把域名封装成常量。这样方便使用，如果可以，让AI给出接口注释，方便后续使用。
参考如下：
/*** 批改指定答题记录* @param id 答题记录ID* @returns {Promise<{score: number, comment: string}>}*/correcting: async (id: string) => {const token = localStorage.getItem('token')const response = await fetch(`${BASE_URL}/chat/correcting/${id}`, {method: 'GET',headers: {Authorization: token ? `Bearer ${token}` : '',},})if (!response.ok) {throw new Error('批改失败')}return await response.json() // { score, comment }},
完善页面
在AI的上下文中添加具体要完善的页面，以及这个页面要用的API，组件等信息，并提出功能要求。通过不断的交互完善功能。
常见问题：
| 问题 | 建议 |
|---|---|
| 样式错位 | 提供父容器对应CSS信息，在浏览器中使用f12抓取父组件和子组件信息 |
| 依赖飘红 | 导入依赖/删除未使用依赖 |
| 接口错误 | 检查接口名称是否正确/查看接口参数 |
细节修复
如果写的页面有问题，则指出并让ai修改，需要注意是如果有的问题AI始终无法解决，如CSS排版等问题，这些可能就需要手动f12解决了。
实用建议
- trae等AI工具有时候写入功能会乱写，所以有时候要你手动通过CTRL+F进行定位和添加
- 一个页面超过行数多就必须考虑拆分，否则可能会因为上下文不够而导致AI已读乱会