当前位置: 首页 > news >正文

shadcn-vue 快速入门(2)

components.json

关于项目配置

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"
}

点击预览效果

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

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

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

重要提示: 如果您使用的是 src 目录,请确保它在 tsconfig.jsonjsconfig.json 文件的路径中。

aliases.utils

为你的工具函数设定导入别名

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

aliases.components

为你的工具函数设定导入别名

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

aliases.ui

为你的 UI 组件设定导入别名

CLI 将使用 aliases.ui 值来确定将您的 UI 组件放置在哪里。如果您想自定义 UI 组件的安装目录,请使用如下配置。

{"aliases": {"ui": "@/app/ui"}
}
http://www.lryc.cn/news/453190.html

相关文章:

  • Oracle数据恢复—异常断电导致Oracle数据库报错的数据恢复案例
  • 数据结构-4.1.特殊矩阵的压缩存储
  • Hive数仓操作(十四)
  • SpringBoot技术:实现古典舞在线交流平台的秘诀
  • 自动驾驶系列—全面解析自动驾驶线控制动技术:智能驾驶的关键执行器
  • YOLO11改进|卷积篇|引入可变核卷积AKConv
  • 推荐 uniapp 相对好用的海报生成插件
  • MySQL表操作(进阶)
  • 【设计模式】软件设计原则——接口隔离迪米特
  • 【C++】——list的介绍和模拟实现
  • B树系列解析
  • docker 部署 WEB IDE
  • 【Android】数据存储
  • 个人网络安全的几个重点与防御
  • python爬虫 - 初识爬虫
  • tomcat版本升级导致的umask问题
  • Golang | Leetcode Golang题解之第455题分发饼干
  • vscode+stfp插件,实现远程自动同步文件代码
  • python 实现djb2哈希算法
  • 文件夹作为普通文件而非子模块管理
  • 7c结构体
  • 浅聊前后端分离开发和前后端不分离开发模式
  • RabbitMQ篇(死信交换机)
  • HBase 的 MemStore 详解
  • 【嵌入式软件-数据结构与算法】01-数据结构
  • Windows应用开发-解析AVI视频文件
  • 探索TCP协议的奥秘:Python中的网络通信
  • 每日学习一个数据结构-树
  • 简单PCL库读文件(linux vscode编译)
  • 【自动驾驶】最近计划看的论文