components.json

components.json 文件包含您项目的配置信息。

我们使用它来了解您的项目设置，并据此为您生成定制化的组件。

您可以通过运行以下命令在项目中创建 components.json 文件：

pnpmnpmyarnbun
pnpm dlx shadcn-vue@latest init
Copy

有关详细信息，请参阅 CLI 章节。

$schema

您可以 在此处 查看 components.json 的 JSON Schema。

Copy{
  "$schema": "https://vue.shadcn.org.cn/schema.json"
}

style

组件的样式。初始化后无法更改。

Copy{
  "style": "new-york"
}

default 样式已被弃用。请改用 new-york 样式。

tailwind

用于帮助 CLI 了解项目如何设置 Tailwind CSS 的配置。

有关如何设置 Tailwind CSS 的说明，请参阅 安装章节。

tailwind.config

tailwind.config.js 文件所在的路径。对于 Tailwind CSS v4，请留空。

Copy{
  "tailwind": {
    "config": "tailwind.config.js" | "tailwind.config.ts"
  }
}

tailwind.css

将 Tailwind CSS 导入到项目中的 CSS 文件路径。

Copy{
  "tailwind": {
    "css": "styles/global.css"
  }
}

tailwind.baseColor

用于为您的组件生成默认配色方案。初始化后无法更改。

Copy{
  "tailwind": {
    "baseColor": "gray" | "neutral" | "slate" | "stone" | "zinc"
  }
}

tailwind.cssVariables

您可以选择使用 CSS 变量或 Tailwind CSS 工具类来进行主题设置。

若要使用工具类进行主题设置，请将 tailwind.cssVariables 设置为 false。若要使用 CSS 变量，请将其设置为 true。

Copy{
  "tailwind": {
    "cssVariables": `true` | `false`
  }
}

有关详细信息，请参阅主题文档。

初始化后无法更改。 若要在 CSS 变量和工具类之间切换，您必须删除并重新安装您的组件。

tailwind.prefix

Tailwind CSS 工具类使用的前缀。添加组件时将带有此前缀。

Copy{
  "tailwind": {
    "prefix": "tw-"
  }
}

typescript

选择使用 TypeScript 还是 JavaScript 组件。

将此选项设置为 false 允许以 JavaScript 形式将组件添加到 .vue 文件中。

Copy{
  "typescript": `true` | `false`
}

aliases

CLI 使用这些值以及 tsconfig.json 或 jsconfig.json 文件中的 paths 配置，将生成的组件放置在正确的位置。

路径别名必须在 tsconfig.json 或 jsconfig.json 文件中配置。

aliases.utils

工具函数的导入别名。

Copy{
  "aliases": {
    "utils": "@/lib/utils"
  }
}

aliases.components

组件的导入别名。

Copy{
  "aliases": {
    "components": "@/components"
  }
}

aliases.ui

ui 组件的导入别名。

CLI 将使用 aliases.ui 的值来确定放置 ui 组件的位置。如果您想自定义 ui 组件的安装目录，请使用此配置。

Copy{
  "aliases": {
    "ui": "@/app/ui"
  }
}

aliases.lib

lib 函数（如 cn 或 valueUpdater）的导入别名。

Copy{
  "aliases": {
    "lib": "@/lib"
  }
}

aliases.composables

composables（如 useMediaQuery 或 useToast）的导入别名。

Copy{
  "aliases": {
    "composables": "@/composables"
  }
}