icodex - 个人网站
·
如何开发自己的一个 shadcn 组件
💡
原文中文，约4600字，阅读约需11分钟。
📝
内容提要
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 参数指定要添加的组件地址，简化了组件共享流程。
如何使用 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 内容以获取组件源码。
➡️
