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.vue
<template> <div class="category-icon" :style="{ backgroundColor: config?.color + '20', width: size + 'px', height: size + 'px' }"> <span class="icon" :style="{ fontSize: iconSize + 'px' }">{{ config?.icon }}</span> </div> </template> <script setup lang="ts"> 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(defineProps<Props>(), { size: 32, }) const config = computed(() => CATEGORY_CONFIG.find(c => c.value === props.category) ) // 计算图标大小（约为容器大小的 60%） const iconSize = computed(() => props.size * 0.6) </script> <style scoped lang="scss"> .category-icon { display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; .icon { line-height: 1; } } </style>