AI辅助编写前端VUE应用流程-EW帮帮网

引言：为什么要用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已读乱会

AI辅助编写前端VUE应用流程