components.json
关于项目配置
components.json
文件保存了项目的配置信息。
我们使用该文件了解项目的基本设定,并生成定制化的组件以适应项目需求。
注意:
components.json
文件是可选的,仅在使用 CLI 向项目添加组件时才需要。如果使用复制粘贴的方式,则不需要该文件。
你可以通过运行以下命令在项目中创建一个 components.json 文件:
bash
npx shadcn-vue@latest init
更多相关信息,请参阅 ++CLI 部分++。
$schema
你可以在此查看 components.json
的 JSON 模式(Schema)。
bash
{
"$schema": "https://shadcn-vue.com/schema.json"
}
style
组件的样式配置。此设置在初始化后无法更改。
bash
{
"style": "default" | "new-york"
}
Tailwind
用于帮助 CLI 理解项目中 Tailwind CSS 配置的相关设置。
如何设置 Tailwind CSS 的相关信息,请参阅++安装++部分。
tailwind.config
指向 tailwind.config.js
文件所在的路径。
bash
{
"tailwind": {
"config": "tailwind.config.js" | "tailwind.config.ts"
}
}
tailwind.css
将 Tailwind CSS 导入到您项目中对应的 CSS 文件的路径。
tailwind.baseColor
用于生成组件的默认颜色配色。初始化后无法更改。
bash
{
"tailwind": {
"baseColor": "gray" | "neutral" | "slate" | "stone" | "zinc"
}
}
tailwind.cssVariables
您可以选择使用 CSS 变量或 Tailwind CSS 工具类来进行主题设置。
要使用工具类进行主题设置,请将 tailwind.cssVariables
设置为 false
。要使用 CSS 变量,请将 tailwind.cssVariables
设置为 true
。
bash
{
"tailwind": {
"cssVariables": `true` | `false`
}
}
更多相关信息,请参见++主题++文档。
初始化后无法更改。如果要在 CSS 变量和工具类之间切换,您将需要删除并重新安装组件。
aliases
CLI 从你的 tsconfig.json
或 jsconfig.json
文件中获取并使用这些配置( value
和 path
),最终将生成的组件放置在正确的位置。
路径别名必须在 tsconfig.json
或 jsconfig.json
文件中设置。
如果在 tsconfig.json
中没有找到路径,则回退到 tsconfig.app.json
。
重要提示: 如果您使用的是
src
目录,请确保它在tsconfig.json
或jsconfig.json
文件的路径中。
aliases.utils
为你的工具函数设定导入别名
bash
{
"aliases": {
"utils": "@/lib/utils"
}
}
aliases.components
为你的工具函数设定导入别名
bash
{
"aliases": {
"components": "@/components"
}
}
aliases.ui
为你的 UI
组件设定导入别名
CLI 将使用 aliases.ui
值来确定将您的 UI
组件放置在哪里。如果您想自定义 UI
组件的安装目录,请使用如下配置。
bash
{
"aliases": {
"ui": "@/app/ui"
}
}