[{"data":1,"prerenderedAt":392},["ShallowReactive",2],{"content:\u002Fposts\u002F2026\u002Fhow-to-contribute-to-shadcn-vue":3,"surround:\u002Fposts\u002F2026\u002Fhow-to-contribute-to-shadcn-vue":386},{"id":4,"title":5,"body":6,"canonical":365,"categories":366,"date":368,"description":369,"draft":370,"extension":145,"image":365,"meta":371,"navigation":372,"path":373,"permalink":365,"readingTime":374,"recommend":365,"references":365,"seo":379,"sitemap":380,"stem":381,"tags":382,"type":365,"updated":368,"__hash__":385},"content\u002Fposts\u002F2026\u002Fhow-to-contribute-to-shadcn-vue.md","手把手教你如何为 shadcn-vue 贡献代码",{"type":7,"value":8,"toc":351},"minimark",[9,13,29,32,36,39,82,86,105,110,121,136,139,149,153,156,190,235,239,253,256,259,322,326,332,345,348],[10,11,12],"p",{},"首先，我们要明确目标：你想迁移哪个组件？",[10,14,15,16,23,24,28],{},"第一步，去 ",[17,18,22],"a",{"href":19,"rel":20},"https:\u002F\u002Fgithub.com\u002Funovue\u002Fshadcn-vue\u002Fissues?q=sort%3Aupdated-desc+is%3Aissue+state%3Aopen+",[21],"nofollow","shadcn-vue 的 GitHub Issue 页面"," 看看是否已有人提出。如果找到了，为避免有多人进行相同的迁移，可以在评论区积极认领这个组件。如果没有，就",[25,26,27],"strong",{},"自己创建一个新 Issue","，简要说明想迁移的组件，等待社区确认。",[10,30,31],{},"确认后，我们就可以开始行动了！",[33,34,35],"h2",{"id":35},"迁移前的准备",[10,37,38],{},"在写代码之前，先把环境理清楚，可以省去后续不少麻烦。",[40,41,42,60,72],"ol",{},[43,44,45,48,49,54,55,59],"li",{},[25,46,47],{},"Fork 并克隆仓库","：访问 ",[17,50,53],{"href":51,"rel":52},"https:\u002F\u002Fgithub.com\u002Funovue\u002Fshadcn-vue",[21],"shadcn-vue 仓库","，点击 Fork 到你的 GitHub 账号下。然后将它克隆到本地，并创建一个新的分支，例如 ",[56,57,58],"code",{"code":58},"feat\u002Fadd-marker-component","。",[43,61,62,65,66,71],{},[25,63,64],{},"（可选）参考官方源码","：为了方便对照，你可以把 ",[17,67,70],{"href":68,"rel":69},"https:\u002F\u002Fgithub.com\u002Fshadcn-ui\u002Fui",[21],"shadcn\u002Fui 官方仓库"," 也克隆到本地。这样在迁移时能随时参考 React 源码的实现细节。",[43,73,74,77,78,81],{},[25,75,76],{},"安装依赖","：在项目根目录运行 ",[56,79,80],{"code":80},"pnpm install","，确保所有依赖都安装正确。",[33,83,85],{"id":84},"核心步骤组件迁移","核心步骤：组件迁移",[10,87,88,89,92,93,96,97,100,101,104],{},"组件迁移主要分三部分：",[25,90,91],{},"文档","、",[25,94,95],{},"组件代码","和",[25,98,99],{},"样式","。我们以迁移 ",[56,102,103],{"code":103},"Marker"," 组件为例。",[106,107,109],"h3",{"id":108},"_1-编写组件文档","1. 编写组件文档",[10,111,112,113,116,117,120],{},"文档是组件的门面。在 ",[56,114,115],{"code":115},"apps\u002Fv4\u002Fcontent\u002Fdocs\u002Fcomponents"," 目录下新建一个 ",[56,118,119],{"code":119},"marker.md"," 文件。",[122,123,124],"blockquote",{},[10,125,126,129,130,135],{},[56,127,128],{"code":128},"shadcn-vue"," 的文档基于 ",[17,131,134],{"href":132,"rel":133},"https:\u002F\u002Fcontent.nuxt.com\u002F",[21],"Nuxt Content"," 构建，你可以在文件中使用 Vue 组件和 Markdown 语法来展示示例。",[10,137,138],{},"我们使用如下代码包裹示例代码，在文档页面它的表现形式是会展示组件效果并有源码展示。",[140,141,147],"pre",{"className":142,"code":144,"language":145,"meta":146},[143],"language-md","::component-preview\n---\nname: MarkerDemo # 这里需要你在 `apps\u002Fv4\u002Fcomponents\u002Fdemo` 中有同名的组件\nclass: style-luma # 这里是附加到组件展示时的样式，一般不需填写。\n---\n::\n","md","",[56,148,144],{"__ignoreMap":146},[106,150,152],{"id":151},"_2-迁移组件代码","2. 迁移组件代码",[10,154,155],{},"这是最核心的一步。我们需要在两个地方创建组件：",[157,158,159,179],"ul",{},[43,160,161,166,167,170,171,174,175,178],{},[25,162,163],{},[56,164,165],{"code":165},"apps\u002Fv4\u002Fregistry\u002Fnew-york-v4\u002Fui\u002Fmarker\u002F","：这个目录存放",[25,168,169],{},"无头（Headless）"," 组件。它只负责逻辑和基本结构，",[25,172,173],{},"不要","包含任何 ",[56,176,177],{"code":177},"cn-"," 开头的预设样式类，所有样式通过 Tailwind 的工具类直接写在模板中。",[43,180,181,166,186,189],{},[25,182,183],{},[56,184,185],{"code":185},"apps\u002Fv4\u002Fregistry\u002Fbases\u002Freka-ui\u002Fui\u002Fmarker\u002F",[25,187,188],{},"带预设样式","的组件。你需要在这里重复实现该组件，并为其应用不同的预设样式。",[122,191,192,198],{},[10,193,194,197],{},[25,195,196],{},"迁移小贴士","：",[157,199,200,211,221],{},[43,201,202,203,206,207,210],{},"将 React 的 ",[56,204,205],{"code":205},"className"," 替换为 Vue 的 ",[56,208,209],{"code":209},":class"," 绑定。",[43,212,213,214,217,218,59],{},"将 React 的事件处理（如 ",[56,215,216],{"code":216},"onClick","）替换为 Vue 的 ",[56,219,220],{"code":220},"@click",[43,222,223,224,227,228,231,232,59],{},"React中使用 ",[56,225,226],{"code":226},"base ui ","或者 ",[56,229,230],{"code":230},"radix"," 作为底层，vue这里我们使用 ",[56,233,234],{"code":234},"reka-ui",[106,236,238],{"id":237},"_3-适配预设样式","3. 适配预设样式",[10,240,241,242,245,246,249,250,252],{},"为了让组件在不同的预设风格下都能完美显示，你还需要在 ",[56,243,244],{"code":244},"apps\u002Fv4\u002Fregistry\u002Fstyles\u002F"," 目录下，找到对应的预设 CSS 文件（如 ",[56,247,248],{"code":248},"style-luma.css","），并添加以 ",[56,251,177],{"code":177}," 开头的自定义样式类。这些类会被第二步中的预设样式组件所使用。",[33,254,255],{"id":255},"验证与提交",[10,257,258],{},"迁移完成后，我们需要验证一下是否一切正常：",[40,260,261,264,277,291],{},[43,262,263],{},"启动本地文档，查看各种效果是否正常。",[43,265,266,77,269,272,273,276],{},[25,267,268],{},"生成注册文件",[56,270,271],{"code":271},"pnpm run registry:build","。这个命令会自动扫描你的组件，并生成相应的 JSON 配置文件，这是 ",[56,274,275],{"code":275},"pnpm dlx shadcn-vue@latest add"," 命令能够工作的基础。",[43,278,279,282,283,286,287,290],{},[25,280,281],{},"运行检查","：确保项目能正常构建（",[56,284,285],{"code":285},"pnpm run build","），并且代码符合规范（",[56,288,289],{"code":289},"pnpm run lint","）。",[43,292,293,197,296,299,300],{},[25,294,295],{},"提交代码",[25,297,298],{},"请务必只提交与当前组件相关的文件改动","，主要包括：",[157,301,302,309,315],{},[43,303,304,305,308],{},"新增的组件文件（",[56,306,307],{"code":307},"apps\u002Fv4\u002Fregistry\u002F...","）",[43,310,311,312,308],{},"新增的文档文件（",[56,313,314],{"code":314},"apps\u002Fv4\u002Fcontent\u002F...",[43,316,317,318,321],{},"由 ",[56,319,320],{"code":320},"registry:build"," 生成的 JSON 文件",[33,323,325],{"id":324},"创建-pull-request","创建 Pull Request",[10,327,328,329,331],{},"完成以上步骤后，将你的分支推送到 GitHub，然后在 ",[56,330,128],{"code":128}," 主仓库创建一个 Pull Request（PR）。",[10,333,334,335,338,339,344],{},"在 PR 描述中，清晰地说明你迁移了哪个组件，并附上相关的 Issue 链接。之后，耐心等待维护者的 Review 即可。他们会给出修改建议，在一切符合要求后，你的代码就会被合并到 ",[56,336,337],{"code":337},"dev"," 分支，并最终出现在 ",[17,340,343],{"href":341,"rel":342},"https:\u002F\u002Fwww.shadcn-vue.com\u002F",[21],"shadcn-vue 官网"," 上！",[33,346,347],{"id":347},"结语",[10,349,350],{},"Vue 生态的繁荣，离不开像你一样愿意主动分享和付出的人。如果你在贡献过程中遇到任何问题，欢迎在评论区留言，我们一起探讨。期待你的第一个 PR！🎉",{"title":146,"searchDepth":352,"depth":352,"links":353},4,[354,356,362,363,364],{"id":35,"depth":355,"text":35},2,{"id":84,"depth":355,"text":85,"children":357},[358,360,361],{"id":108,"depth":359,"text":109},3,{"id":151,"depth":359,"text":152},{"id":237,"depth":359,"text":238},{"id":255,"depth":355,"text":255},{"id":324,"depth":355,"text":325},{"id":347,"depth":355,"text":347},null,[367],"经验分享","2026-07-04 18:30:54","一份为 shadcn-vue 贡献组件代码的完整指南，从寻找 issue 到提交 PR，手把手带你迈出第一步。",false,{},true,"\u002Fposts\u002F2026\u002Fhow-to-contribute-to-shadcn-vue",{"text":375,"minutes":376,"time":377,"words":378},"5 min read",4.99,299400,998,{"title":5,"description":369},{"loc":373},"posts\u002F2026\u002Fhow-to-contribute-to-shadcn-vue",[383,384,128],"Vue","shadcn","Lw7oyt83FZlnMLf51i5BxeiltRmpulM-Hy8JMjn_5ko",[387,365],{"title":388,"path":389,"stem":390,"date":391,"type":365,"children":-1},"在 2026 年你可以使用的新的 JavaScript Set API","\u002Fposts\u002F2026\u002Fthe-latest-js-set-api-you-can-use-in-2026","posts\u002F2026\u002Fthe-latest-js-set-api-you-can-use-in-2026","2026-07-02 22:17:50",1783165398570]