icodex - 个人网站
·
如何开发自己的一个 shadcn 组件
内容提要
shadcn 在一年内新增了支持第三方 registry 的 add 和 build 命令。add 命令简化了组件共享流程，允许指定组件地址；build 命令生成 registry.json，便于组件库的使用与共享。开发者可以快速创建和发布组件库。
关键要点
-
shadcn 在一年内新增了支持第三方 registry 的 add 和 build 命令。
-
add 命令简化了组件共享流程，允许指定组件地址。
-
build 命令生成 registry.json，便于组件库的使用与共享。
-
shadcn add 命令支持通过 components 参数指定要添加的组件地址。
-
shadcn build 命令用于构建 registry.json 文件，使组件库支持 shadcn add 命令。
-
build 命令将 registry.json 内容写入项目根目录的 public 目录下。
-
开发者可以基于 shadcn 提供的 nextjs 模板项目直接开发组件。
-
完成组件开发后，可以在 Vercel 上绑定仓库并构建发布。
延伸解读
shadcn add 命令的灵活性
shadcn add 命令的更新使得开发者可以通过 components 参数灵活指定组件地址，避免了之前只能指定单一第三方域的局限。这一改进大大简化了组件共享的流程，开发者可以更方便地管理和使用不同来源的组件，提升了开发效率。
构建 registry.json 的重要性
shadcn build 命令的引入使得组件库的构建过程更加高效。通过自动生成 registry.json，开发者无需手动将组件源码写入文件，减少了出错的可能性。这一流程的简化对于希望快速发布和共享组件的开发者来说尤为重要。
使用 shadcn 的开发流程
开发者可以基于 shadcn 提供的 nextjs 模板项目快速开始组件开发。通过 GitHub 创建仓库并在 Vercel 上发布，开发者能够轻松实现组件的共享与使用。这种无缝的集成流程降低了技术门槛，鼓励更多开发者参与到 shadcn 生态中。
延伸问答
shadcn 的 add 命令有什么新特性？
shadcn 的 add 命令现在支持通过 components 参数指定要添加的组件地址，简化了组件共享流程。
如何使用 shadcn build 命令？
shadcn build 命令用于构建 registry.json 文件，支持将组件源码写入该文件，便于其他项目使用 shadcn add 命令添加组件。
开发者如何开始使用 shadcn 开发组件？
开发者可以基于 shadcn 提供的 nextjs 模板项目直接开发组件，并在完成后将其推送到 GitHub。
shadcn 的 registry.json 文件有什么作用？
registry.json 文件用于定义组件库的结构和组件代码，使得其他项目可以通过 shadcn add 命令添加这些组件。
如何在 Vercel 上发布 shadcn 组件？
在完成组件开发后，开发者可以将其推送到 GitHub，并在 Vercel 上绑定仓库进行构建和发布。
shadcn add 命令如何处理远端组件地址？
shadcn add 命令会判断 components 参数是否为 URL，如果是，则会请求该地址的 JSON 内容以获取组件源码。
