直接使用AI写代码目前应该算是挺火的，cursor感觉无所不能，Trae也在齐头并进，虽然说差点，但是满足日常开发绰绰有余。

但是在使用中我有一些自己的观点：

(1)使用AI协助开发是最优解，依赖AI开发有待商榷
(2)开发经验浅的人不适合直接使用AI编程
(3)非开发人员(比如美工)尽量不要直接用AI设计界面以及功能

在开发中，我一直秉承着老式开发原则，除了重复性功能（比如：登录防抖节流等）、数据处理（将接口返回的数据重构为其它的数据机构）之外，其实很少用到AI，更多的把AI当做一个知识库，忘记了的查询一下，未接触过的了解一下，仅此而已。

为什么突然想浅记一下，因为最近有两起使用过程不那么愉快的经历。

事件一：

公司让美工设计界面，美工指挥cursor直接生成了一套没有连接后端数据的一套完整的系统。在不了解公司使用的vue开发时，cursor先用nextjs构建了一套服务端渲染的系统，在想和公司之前做的项目融合的时候发现完全不一样。

在了解公司使用的技术栈之后，重新使用vue生成了一套一模一样的完整的系统，可能是不了解技术，描述的不够准确，生成的内容不是那么恰当。

下面举一个例子可能更明白一点。

总共有4个路由界面，4个路由的结构为：

  {
    path: "/homePage",
    name: "homePage",
    component: () => import("@/views/HomePage.vue"),
  },
  {
    path: "/userPage",
    name: "userPage",
    component: () => import("@/views/UserPage.vue"),
  },
  {
    path: "/messagePage",
    name: "messagePage",
    component: () => import("@/views/MessagePage.vue")
  },
  {
    path: "/articlePage",
    name: "articlePage",
    component: () => import("@/views/ArticlePage.vue")
  }

每一个页面vue文件的代码为

<template>
    <Header />
    ……
</template>

每一个页面的布局为

嗯……看到运行效果的时候其实感觉不出来一点不对，觉得设计的蛮好的，但是准备开发的时候发现，header组件是每一个页面都有的，而且在其中会需要项目的信息，所以就在Header中调用了项目信息。这些信息每一个页面都需要，但是这样写每个页面都获取不到项目的信息。而且切换页面的时候，header中会重新调接口，事情彷佛有些不对……

既然用了vue，vue也做了很多单页面应用，而且这个项目结构来看的话就是个单页面应用呀，但是美工的描述和AI的生成并没有意识到这个问题，个人认为正确的结构应该是下面这样的。

路由结构

 {
    path: "/homePage",
    component: Layout,
    children: [{
      path: "",
      name: 'homePage',
      component: () => import("@/views/secondVersion/HomePage.vue"),
    }]
  },
  {
    path: "/userPage",
    component: Layout,
    children: [{
      path: "",
      name: 'userPage',
      component: () => import("@/views/UserPage.vue"),
    }]
  },
  {
    path: "/messagePage",
    component: Layout,
    children: [{
      path: "",
      name: "messagePage",
      component: () => import("@/views/MessagePage.vue")
    }]
  },
  {
    path: "/articlePage",
    component: Layout,
    children: [{
      path: "",
      name: "articlePage",
      component: () => import("@/views/ArticlePage.vue")
    }]
  },

页面结构应该是这样的

这样每一次的路由切换只切换router-view的部分

所以不了解项目结构的美工不建议直接使用AI生成页面并直接让前端继续开发功能，因为可能会有很多地方不合理，有时候修改的时间甚至大于直接开发的时间。

事件二

公司同事很喜欢用AI直接写功能，但是可能自己的基础不是很牢固，平时做页面、写功能都没有问题，但是稍微一复杂的东西就使用AI实现。

有一个这个功能，类似于购物车数量功能，可加（一次加1）可减（一次减1）可输入，也可以长按加（一次加5）长按减（一次减5）。

因为数量有范围，范围是1-99，如果没有值的情况下，默认显示99,（不知道为什么会有这个设定）

我模拟的部分（类似）AI给的代码如下：

const max = 99;
const numValue = ref(0)
const defaultValue = ref(99)

const operate = (type) => {
    let tempValue = numValue.value || defaultValue;
    if (type == 1) {
        if (tempValue >= max) {
            // 已经是最大值不能设置
        }
        tempValue += 1;
    }
    ……
}

其它功能都好了，就是值为0的时候按加号会提示“已经是最大值不能设置”。

按说这个问题很好解决，虽然我贴的内容很少，但是同事就一直没有解决，可能一天工作也很累，看的眼睛都花了，所以才没有解决。但是我认为如果不是AI生成的，是自己写的是不是就不会出现这个问题。

毕竟自己写的话，在0是有效值的时候是不会用这个值为0的变量去进行||运算的。

总结

以上就是最近的使用过程，不能否认AI带来的优点是使工作更方便的更高效，但是不合理的使用也会带来很多麻烦。