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"
  }
}
相关推荐
Martin -Tang10 分钟前
vite和webpack的区别
前端·webpack·node.js·vite
迷途小码农零零发11 分钟前
解锁微前端的优秀库
前端
王解1 小时前
webpack loader全解析,从入门到精通(10)
前端·webpack·node.js
老码沉思录1 小时前
写给初学者的React Native 全栈开发实战班
javascript·react native·react.js
我不当帕鲁谁当帕鲁1 小时前
arcgis for js实现FeatureLayer图层弹窗展示所有field字段
前端·javascript·arcgis
那一抹阳光多灿烂1 小时前
工程化实战内功修炼测试题
前端·javascript
放逐者-保持本心,方可放逐2 小时前
微信小程序=》基础=》常见问题=》性能总结
前端·微信小程序·小程序·前端框架
毋若成4 小时前
前端三大组件之CSS,三大选择器,游戏网页仿写
前端·css
红中马喽4 小时前
JS学习日记(webAPI—DOM)
开发语言·前端·javascript·笔记·vscode·学习
Black蜡笔小新5 小时前
网页直播/点播播放器EasyPlayer.js播放器OffscreenCanvas这个特性是否需要特殊的环境和硬件支持
前端·javascript·html