用CodeBuddy快速生成可运行前端页面需先定义组件结构再注入逻辑：创建新组件（如LoginCard）自动生成tsx/scss/stories文件；编写UI骨架与样式，确保类名一致；用useState管理表单状态；保存后预览并执行npx codebuddy export导出。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
用CodeBuddy快速生成可运行的前端页面，需先定义组件结构再注入逻辑，跳过手动搭架子和重复写HTML/CSS的环节。
创建新组件并声明基础结构
打开CodeBuddy工作区 → 点击左上角「+ New Component」→ 在弹出框中输入组件名（如LoginCard），选择「React + TypeScript」模板 → 点击Create。
这一步会自动生成tsx、scss、stories.tsx三个文件。若跳过命名直接创建，系统将用默认名Component1，后续改名需同步修改文件名、导出名和引用路径，【不建议跳过命名】。
编写UI骨架与样式
在LoginCard.tsx中删掉默认示例代码，从return语句开始写JSX结构：
立即学习“前端免费学习笔记（深入）”；
<div className="login-card"><h2>登录</h2><input placeholder="用户名" /><input type="password" placeholder="密码" /><button>提交</button></div>
接着打开LoginCard.scss，写对应样式：.login-card { padding: 24px; border-radius: 8px; border: 1px solid #e0e0e0; }。注意类名必须和JSX里className完全一致，大小写敏感，拼错会导致样式失效。
绑定交互逻辑
方法一：使用useState管理表单状态
在LoginCard.tsx顶部导入：import { useState } from 'react';
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
在函数体内添加：const [form, setForm] = useState({ username: '', password: '' });
把两个input的value和onChange补全：<input value={form.username} onChange={(e) => setForm({...form, username: e.target.value})} />
方法二：用useCallback优化事件处理（适合复杂表单）
替换原onChange为：onChange={useCallback((e) => setForm(prev => ({...prev, username: e.target.value})), [])}
这个写法能避免每次渲染都新建函数，但对只有两个字段的登录框属于过度设计，【初学者优先用方法一】。
预览并导出组件
第一步：保存LoginCard.tsx和LoginCard.scss
第二步：点击右侧面板的「Preview」按钮，CodeBuddy自动启动热更新预览服务
第三步：确认页面正常显示且输入有响应 → 打开终端，执行npx codebuddy export --component LoginCard
该命令会打包组件为独立npm包格式，输出到dist/目录。导出前未保存文件会导致打包内容滞后，【务必先Ctrl+S再执行export】。
