Vue组件开发提效：5步生成可复用组件模板
提示词描述：
专为Vue开发者设计的组件生成方案，通过结构化提示词快速输出符合企业级规范的代码框架。适用于需要批量创建标准化组件的中大型项目，预期可减少40%的模板代码编写时间。建议配合ESLint规则使用，确保输出代码质量。
提示语关键词：
Vue组件模板,Vue3开发,AI代码生成,前端效率工具,可复用组件设计,Composition API实战
提示词内容：
【应用场景】
适用于前端开发者快速搭建标准化Vue组件，减少重复编码工作
【案例描述】
以电商商品卡片组件为例，需包含图片懒加载、价格格式化、响应式布局等核心功能，传统开发需手动编写Props定义、模板结构及样式逻辑
【提示词正文】
请作为Vue3架构师，按以下框架生成组件：
1. 定义Props接口（含类型校验与默认值）
2. 编写Composition API逻辑（计算属性/侦听器）
3. 生成插槽占位符与条件渲染结构
4. 添加CSS Modules样式隔离方案
5. 输出TypeScript类型声明文件
【使用技巧】
在{填写}处补充业务特定参数（如图片比例阈值、货币符号），使用v-bind动态注入配置
【延伸用法】
结合Storybook生成组件文档，通过单元测试覆盖边界状态