在cursor中通过配置vue.json代码片段实现vue3组件一键生成，封装qjx-button组件并完成类型校验、scoped样式、局部/全局注册及打包为npm包全流程。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
在Cursor中快速封装Vue通用组件，核心是把模板结构、逻辑抽离和发布流程全部标准化，避免每次新建组件都手动写setup、props、emits和样式作用域。
配置Cursor代码片段生成标准组件骨架
打开Cursor设置 → User Snippets → 新建或编辑 vue.json 文件，在其中添加名为 vue3-comp-ts 的代码片段：
触发关键词设为 vcomp，输入 vcomp + Tab 即可一键插入带 TypeScript 支持的完整组件模板，包含 、<script setup lang="ts">、<style scoped> 三块结构，自动导入 defineProps、defineEmits 和 ref。</script>
这一步省去90%样板代码，且强制统一使用 Composition API + TS，避免团队成员混用 Options API 导致维护混乱。
封装带类型校验的通用按钮组件（qjx-button）
在 src/packages/ 目录下新建 qjx-button 文件夹，内部创建 index.vue：
使用 defineProps 声明 type、size、disabled、loading 四个必选/可选属性，每个属性都标注明确类型（如 type: 'primary' | 'success' | 'warning'），不写 any 或未声明类型会直接报错。
在 <script setup> 中用 defineEmits 声明 click、hover 两个事件，emit 类型由 TypeScript 自动推导，调用时 IDE 能精准提示参数结构。</script>
【必须加 scoped 属性，否则样式会污染全局】
注册并验证组件可用性
方法一：局部注册（推荐用于调试）
在 App.vue 的 <script setup> 中 import QjxButton from './packages/qjx-button/index.vue'，再在 components 对象中声明 QjxButton。</script>
方法二：全局注册（发布前必做）
在 main.ts 中添加：app.component('QjxButton', QjxButton)，确保所有子组件都能直接使用
运行 npm run serve，打开页面确认按钮渲染正常、点击有响应、鼠标悬停有 class 切换，且控制台无 TypeScript 类型警告。
打包为独立npm包并本地测试
第一步：在项目根目录新建 packages.json，填写 name、version、main、types、exports 字段，main 指向 ./dist/qjx-button.umd.cjs，types 指向 ./dist/qjx-button.d.ts。
第二步：配置 vite.config.ts，设置 build.lib 模式，entry 指向 ./src/packages/qjx-button/index.vue，formats 设为 ['es', 'umd']。
第三步：执行 npm run build:qjx-button（需提前在 package.json scripts 中定义该命令），生成 dist 目录。
第四步：在本地另一个 Vue 项目中执行 npm install /绝对路径/to/your/project/dist/qjx-button.umd.cjs，然后直接 import 使用，验证是否能正确解析 props 类型和 emit 事件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
