shadcn-vue 快速入门(2)

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.jsonjsconfig.json 文件中获取并使用这些配置( valuepath),最终将生成的组件放置在正确的位置。

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

如果在 tsconfig.json 中没有找到路径,则回退到 tsconfig.app.json

重要提示: 如果您使用的是 src 目录,请确保它在 tsconfig.jsonjsconfig.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"
  }
}
相关推荐
小牛itbull9 分钟前
ReactPress vs VuePress vs WordPress
开发语言·javascript·reactpress
请叫我欧皇i18 分钟前
html本地离线引入vant和vue2(详细步骤)
开发语言·前端·javascript
533_20 分钟前
[vue] 深拷贝 lodash cloneDeep
前端·javascript·vue.js
guokanglun26 分钟前
空间数据存储格式GeoJSON
前端
GIS瞧葩菜29 分钟前
局部修改3dtiles子模型的位置。
开发语言·javascript·ecmascript
zhang-zan1 小时前
nodejs操作selenium-webdriver
前端·javascript·selenium
ZBY520311 小时前
【Vue】 npm install amap-js-api-loader指南
javascript·vue.js·npm
猫爪笔记1 小时前
前端:HTML (学习笔记)【2】
前端·笔记·学习·html
brief of gali1 小时前
记录一个奇怪的前端布局现象
前端
计算机毕设指导61 小时前
基于 SpringBoot 的作业管理系统【附源码】
java·vue.js·spring boot·后端·mysql·spring·intellij-idea