入门

本指南将引导你完成设置自己的组件注册表的过程。

🌐 This guide will walk you through the process of setting up your own component registry.

它假设你已经有一个包含组件的项目，并希望将其转化为注册表。

🌐 It assumes you already have a project with components and would like to turn it into a registry.

registry.json

只有在使用 shadcn-vue CLI 构建你的注册表时，才需要 registry.json 文件。

🌐 The registry.json file is only required if you're using the shadcn-vue CLI to build your registry.

如果你使用的是不同的构建系统，只要你的构建系统生成符合 registry-item schema specification 的有效 JSON 文件，你可以跳过这一步。

🌐 If you're using a different build system, you can skip this step as long as your build system produces valid JSON files that conform to the registry-item schema specification.

Copy{
  "$schema": "https://shadcn-vue.com/schema/registry.json",
  "name": "acme",
  "homepage": "https://acme.com",
  "items": [
    // ...
  ]
}

添加一个注册表项

🌐 Add a registry item

Copy<script setup lang="ts">
import { Button } from "@/components/ui/button"
</script>

<template>
  <Button>Hello World</Button>
</template>

Copyregistry
└── new-york
    └── HelloWorld
        └── HelloWorld.vue

Copy// tailwind.config.ts
export default {
  content: ["./registry/**/*.{js,ts,jsx,tsx,vue}"],
}

Copy{
  "$schema": "https://shadcn-vue.com/schema/registry.json",
  "name": "acme",
  "homepage": "https://acme.com",
  "items": [
    {
      "name": "hello-world",
      "type": "registry:block",
      "title": "Hello World",
      "description": "A simple hello world component.",
      "files": [
        {
          "path": "registry/new-york/HelloWorld/HelloWorld.vue",
          "type": "registry:component"
        }
      ]
    }
  ]
}

构建你的注册表

🌐 Build your registry

pnpmnpmyarnbun
pnpm add shadcn-vue@latest
Copy

Copy{
  "scripts": {
    "registry:build": "shadcn-vue build"
  }
}

pnpmnpmyarnbun
pnpm registry:build
Copy

为你的注册表提供服务

🌐 Serve your registry

如果你在 Nuxt 上运行你的注册表，你现在可以通过运行 nuxt 服务器来提供你的注册表。对于其他框架，命令可能会有所不同。

🌐 If you're running your registry on Nuxt, you can now serve your registry by running the nuxt server. The command might differ for other frameworks.

pnpmnpmyarnbun
pnpm dev
Copy

你的文件现在将通过 http://localhost:3000/r/[NAME].json 提供，例如 http://localhost:3000/r/hello-world.json。

🌐 Your files will now be served at http://localhost:3000/r/[NAME].json eg. http://localhost:3000/r/hello-world.json.

发布你的注册表

🌐 Publish your registry

要使其他开发者可以使用你的注册表，你可以通过将项目部署到公共 URL 来发布它。

🌐 To make your registry available to other developers, you can publish it by deploying your project to a public URL.

添加认证

🌐 Adding Auth

shadcn-vue CLI 没有提供内置的方法来为你的注册表添加认证。我们建议在你的注册表服务器上处理授权。

🌐 The shadcn-vue CLI does not offer a built-in way to add auth to your registry. We recommend handling authorization on your registry server.

一种常见的简单方法是使用 token 查询参数来对你的注册表请求进行身份验证。例如，http://localhost:3000/r/hello-world.json?token=[SECURE_TOKEN_HERE]。

🌐 A common simple approach is to use a token query parameter to authenticate requests to your registry. e.g. http://localhost:3000/r/hello-world.json?token=[SECURE_TOKEN_HERE].

使用安全令牌来验证请求，如果令牌无效，则返回 401 未授权响应。shadcn CLI 和 Open in v0 都会处理 401 响应并向用户显示消息。

🌐 Use the secure token to authenticate requests and return a 401 Unauthorized response if the token is invalid. Both the shadcn CLI and Open in v0 will handle the 401 response and display a message to the user.

指南

🌐 Guidelines

以下是构建注册表组件时要遵循的一些准则。

🌐 Here are some guidelines to follow when building components for a registry.

• 将你的注册表项放在 registry/[STYLE]/[NAME] 目录中。我使用 new-york 作为示例。只要它位于 registry 目录下，名称可以是你想要的任何内容。
• 块定义需要以下属性：name、description、type 和 files。
• 确保在 registryDependencies 中列出所有注册表依赖。注册表依赖是注册表中组件的名称，例如 input、button、card 等，或注册表条目的 URL，例如 http://localhost:3000/r/editor.json。
• 确保在 dependencies 中列出所有依赖。依赖是注册表中包的名称，例如 zod、sonner 等。要设置版本，可以使用 name@version 格式，例如 zod@^3.20.0。
• 导入应始终使用 @/registry 路径。 例如：import { HelloWorld } from "@/registry/new-york/hello-world/hello-world"
• 理想情况下，将你的文件放置在 components、hooks、lib 目录中的注册表项内。

使用 CLI 安装

🌐 Install using the CLI

要使用 shadcn-vue CLI 安装注册表项，请使用 add 命令，然后跟上注册表项的 URL。

🌐 To install a registry item using the shadcn-vue CLI, use the add command followed by the URL of the registry item.

pnpmnpmyarnbun
pnpm dlx shadcn-vue@latest add http://localhost:3000/r/hello-world.json
Copy