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