在electron-vite使用ShadCN

集成tailwind

这一步较为简单，仅需按照官网步骤即可~
这里不再赘述！

稍微需要注意的是，你的集成配置都需要在 electron.vite.config.ts!

补全tsconfig.json

{
  // ...
  "compilerOptions": {
    "composite": true,
    "types": ["electron-vite/node"],
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/renderer/src/*"]
    }
  }
}

创建vite.config.ts

修改 electron.vite.config.ts， renderer>resolve>alias增加一行

export default defineConfig({
  // ...
  renderer: {
    resolve: {
      alias: {
        // ...
        '@': resolve('src/renderer/src') // Add this line
      }
    }
  }
})

复制一份electron.vite.config.ts，并将其改为为 vite.config.ts!

安装shadcn

现在你可以正常执行安装步骤了

npx shadcn@latest init

最后我们来使用一个插件来试试pnpm dlx shadcn@latest add button,在组件中使用它

import { Button } from "@renderer/components/ui/button"

export default function Demo() {
  return  <Button>Button</Button>
}