安装

如何安装依赖项并构建你的项目结构

支持的框架

• Vite
• Nuxt
• Astro
• Laravel

TypeScript

该项目及其组件是由 TypeScript 编写的。因此，我们也建议在你的项目中使用 TypeScript。

不过，我们也提供了 JavaScript 版本的组件。JavaScript 版本可以通过 cli 获取。

如果你不想使用 TypeScript，你可以在 components.json 文件中使用 typescript 标志来选择退出该模式。

{
  "style": "default",
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "src/app/globals.css",
    "baseColor": "zinc",
    "cssVariables": true
  },
  "typescript": false,
  "aliases": {
    "utils": "~/lib/utils",
    "components": "~/components"
  }
}

要配置 别名导入(import aliases) ，你可以使用以下的 jsconfig.json 文件。

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./*"]
    }
  }
}

VSCode extension

在 Visual Studio Code 安装由 @selemondev 开发的 shadcn-vue 扩展，可以轻松将 Shadcn Vue 组件添加到你的项目中。

该扩展提供了一系列功能：

• 初始化 Shadcn Vue CLI：在 Visual Studio Code 里直接启动命令行工具，用于项目配置和管理。
• 安装组件：可以通过扩展轻松安装需要的组件到项目中。
• 打开文档：无需离开编辑器就能查看组件的相关文档。
• 文档导航：在编辑器里直接跳转到特定组件的文档页面，方便查看使用方法。
• 快捷代码片段：提供预设的代码片段，快速导入组件和生成标记代码，提升开发效率。