components.json

components.json 文件保存了你项目的配置。

🌐 The components.json file holds configuration for your project.

我们用它来了解你的项目是如何设置的以及如何为你的项目生成定制的组件。

🌐 We use it to understand how your project is set up and how to generate components customized for your project.

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

🌐 You can create a components.json file in your project by running the following command:

pnpmnpmyarnbun
pnpm dlx shadcn-vue@latest init
Copy

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

🌐 See the CLI section for more information.

$schema

你可以在此处查看 components.json 的 JSON 模式 here。

🌐 You can see the JSON Schema for components.json here.

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

style

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

🌐 The style for your components. This cannot be changed after initialization.

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

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

🌐 The default style has been deprecated. Use the new-york style instead.

tailwind

配置以帮助 CLI 了解如何在你的项目中设置 Tailwind CSS。

🌐 Configuration to help the CLI understand how Tailwind CSS is set up in your project.

请参阅 安装部分 了解如何设置 Tailwind CSS。

tailwind.config

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

🌐 Path to where your tailwind.config.js file is located. For Tailwind CSS v4, leave this blank.

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

tailwind.css

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

🌐 Path to the CSS file that imports Tailwind CSS into your project.

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

tailwind.baseColor

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

🌐 This is used to generate the default color palette for your components. This cannot be changed after initialization.

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

tailwind.cssVariables

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

🌐 You can choose between using CSS variables or Tailwind CSS utility classes for theming.

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

🌐 To use utility classes for theming set tailwind.cssVariables to false. For CSS variables, set tailwind.cssVariables to true.

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

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

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

tailwind.prefix

用于 Tailwind CSS 实用类的前缀。组件将使用此前缀添加。

🌐 The prefix to use for your Tailwind CSS utility classes. Components will be added with this prefix.

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

typescript

在 TypeScript 或 JavaScript 组件之间进行选择。

🌐 Choose between TypeScript or JavaScript components.

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

🌐 Setting this option to false allows components to be added as JavaScript in .vue file.

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

aliases

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

🌐 The CLI uses these values and the paths config from your tsconfig.json or jsconfig.json file to place generated components in the correct location.

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

🌐 Path aliases have to be set up in your tsconfig.json or jsconfig.json file.

aliases.utils

导入你的实用程序函数的别名。

🌐 Import alias for your utility functions.

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

aliases.components

导入你的组件的别名。

🌐 Import alias for your components.

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

aliases.ui

ui 组件的导入别名。

🌐 Import alias for ui components.

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

🌐 The CLI will use the aliases.ui value to determine where to place your ui components. Use this config if you want to customize the installation directory for your ui components.

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

aliases.lib

lib 函数的导入别名，例如 cn 或 valueUpdater。

🌐 Import alias for lib functions such as cn or valueUpdater.

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

aliases.composables

composables 的导入别名，例如 useMediaQuery 或 useToast。

🌐 Import alias for composables such as useMediaQuery or useToast.

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