参考这里 https://www.shadcn-ui.cn/docs/installation/vite

前置

需要项目提前集成好 taiwindcss，另外还需要配置好短路径，注意 tsconfig.json 和 tsconfig.app.json都要

resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },

初始化

进入项目使用pnpm dlx shadcn@latest init，无特殊要求外均选择默认即可

? Select a component library › - Use arrow-keys. Return to submit.
❯   Radix
    Base

? Which preset would you like to use? › - Use arrow-keys. Return to submit.
❯   Nova - Lucide / Geist
    Vega
    Maia
    Lyra
    Mira
    Luma
    Sera
    Custom

优化

初始化项目后，会在生成 components/ui 用于存放你安装的shadcn组件，以及 components.json这个是shadcn的配置，还有一个src/lib/utils.ts 辅助工具。

但是，我对这个辅助工具不太满意，它迫使我项目多了些文件和文件夹

• 我将生成的代码复制到utils/shadcn/utils.ts
• 改变components.json
• 重新安装组件即可

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

从此 utils/shadcn 就是shadcn 执行的时候自动生成的辅助工具的home目录了，我不关心它.

utils 不指定或指定的不叫 utils，也都会被指定为 utils.tsx，这揭示了 shadcn CLI 的一个“霸王条款”：无论你怎么命名你的文件，它的代码生成模板里那句 import { cn } from "..." 后面跟着的永远是 /utils。