components.json 文件保存项目的配置信息。

我们使用它来了解项目的设置方式，以及如何生成针对项目定制的组件。

注意: components.json 文件是可选的，并且 **仅在使用 CLI 向项目添加组件时才需要**。 如果使用复制粘贴方法，则不需要此文件。

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

npx shadcn-vue@latest init

有关更多信息，请参见 CLI 部分。

$schema

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

{
  "$schema": "https://shadcn-vue.com/schema.json"
}

style

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

{
  "style": "default" | "new-york"
}

创建项目

一键部署新项目。

Name

Framework

Tailwind

帮助 CLI 了解项目中 Tailwind CSS 设置方式的配置。

有关如何设置 Tailwind CSS，请参见 安装部分。

tailwind.config

tailwind.config.js 文件的路径。

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

tailwind.css

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

{
  "tailwind": {
    "css": "src/assets/index.css"
  }
}

tailwind.baseColor

用于生成组件的默认调色板。**初始化后无法更改。**

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

tailwind.cssVariables

可以选择使用 CSS 变量或 Tailwind CSS 实用类进行主题设置。

要使用实用类进行主题设置，请将 tailwind.cssVariables 设置为 false。 对于 CSS 变量，请将 tailwind.cssVariables 设置为 true。

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

有关更多信息，请参见 主题文档。

**初始化后无法更改。** 要在 CSS 变量和实用类之间切换，需要删除并重新安装组件。

aliases

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

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

如果 tsconfig.json 中没有找到 paths，则回退到 tsconfig.app.json

重要提示: 如果使用 src 目录，请确保在 tsconfig.json 或 jsconfig.json 文件的 paths 下包含它。

aliases.utils

实用函数的导入别名。

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

aliases.components

组件的导入别名。

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

aliases.ui

ui 组件的导入别名。

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

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