6、项目初具雏形。重点是：我没有写一行代码，全是复制黏贴。AI太可怕了。果然前端要死。

本文分享了前端开发中的AI辅助体验。作者通过复制粘贴而非手写代码完成了项目雏形指出AI工具的强大可能影响前端岗位。文中列举了两个典型错误el-dialog组件v-model绑定问题和SCSS中的运算符错误并提供了CategoryIcon.vue组件代码示例展示了通过computed计算图标大小等实现细节。作者感叹AI工具如DeepSeek能解决编码错误而Cursor编辑器几乎没派上用场。代码已更新至GitHub。项目初具雏形重点是我没有写一行代码全是复制黏贴。AI太可怕了。果然前端要死。使用的DeepSeek编码报错也能解决遇到的主要错误如下这个错误是因为el-dialog组件的v-model不能直接绑定到visibleprop 上。需要修改为使用v-model:visible或通过事件更新。这个错误是因为在SCSS 中不能直接使用 JavaScript 的*运算符进行数学计算。需要修改CategoryIcon.vue中的样式写法。页面效果Cursor都基本没派上用场代码已更新到GitHub示例文件CategoryIcon.vuetemplate div classcategory-icon :style{ backgroundColor: config?.color 20, width: size px, height: size px } span classicon :style{ fontSize: iconSize px }{{ config?.icon }}/span /div /template script setup langts import { computed } from vue import { CATEGORY_CONFIG } from /utils/constants import type { Category } from /types/fridge interface Props { category: Category size?: number } const props withDefaults(definePropsProps(), { size: 32, }) const config computed(() CATEGORY_CONFIG.find(c c.value props.category) ) // 计算图标大小约为容器大小的 60% const iconSize computed(() props.size * 0.6) /script style scoped langscss .category-icon { display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; .icon { line-height: 1; } } /style