当前位置：首页 > news >正文

我是如何在electron里安装shadcn ui框架的

news 2025/9/18 7:45:29

0. 记录发帖

xxxxxxxxxx —— 2025年9月17日 8:46

1. 安装

shadcn网站：https://ui.shadcn.com/

我的electron项目基于@quick-start/electron@latest生成，因此以下内容也基于这个项目。
在这里插入图片描述

首先来到shadcn的安装教程：https://ui.shadcn.com/docs/installation，点击Manual
在这里插入图片描述

遵照它的步骤，先安装Tailwind ：https://tailwindcss.com/docs/installation/using-vite

在这里插入图片描述

实际上我们只照着前三个步骤就可以了

cd my-project(你的electron项目根目录)
npm install tailwindcss @tailwindcss/vite

首先安装好 tailwindcss npm包，接着我们来到 electron 项目根目录，找到electron.vite.config.ts （tailwindcss 官网里面说的是 vite.config.ts，但在我们 electron 项目这指的就是electron.vite.config.ts，所以不用担心）
在这里插入图片描述

我们改成以下内容:

import { resolve } from 'path'
import { defineConfig, externalizeDepsPlugin } from 'electron-vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite' //export default defineConfig({main: {plugins: [externalizeDepsPlugin()]},preload: {plugins: [externalizeDepsPlugin()]},renderer: {resolve: {alias: {'@renderer': resolve('src/renderer/src')}},plugins: [react(), tailwindcss()]}
})

ok了，到这里，tailwindcss 部分就完成了，我们继续回到shadcn的安装教程里
在这里插入图片描述
下一步我们安装shadcn依赖：

npm install class-variance-authority clsx tailwind-merge lucide-react tw-animate-css

在这里插入图片描述
现在我们去配置一下 tsconfig.json 。在我们 electron 项目里，实际要配置
tsconfig.json
tsconfig.web.json
electron.vite.config.ts 这三份文件：

首先是 tsconfig.json 文件：

{"files": [],"references": [{ "path": "./tsconfig.node.json" }, { "path": "./tsconfig.web.json" }],"compilerOptions": {"baseUrl": ".","paths": {"@/*": ["./src/renderer/src/*"]}}
}

注意了，虽然shadcn官网的教程指的是 ./*，但我们这里是./src/renderer/src/*。为什么呢？因为我们是 electron，我们的实际前端页面也就在/src/renderer/src/下面，所以必须要这样改。

接下来是 tsconfig.web.json 文件

{"extends": "@electron-toolkit/tsconfig/tsconfig.web.json","include": ["src/renderer/src/env.d.ts","src/renderer/src/**/*","src/renderer/src/**/*.tsx","src/preload/*.d.ts"],"compilerOptions": {"composite": true,"jsx": "react-jsx","baseUrl": ".","paths": {"@renderer/*": ["src/renderer/src/*"],"@/*": ["./src/renderer/src/*"]}}
}

最后是 electron.vite.config.ts 文件：

import { resolve } from 'path'
import { defineConfig, externalizeDepsPlugin } from 'electron-vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'export default defineConfig({main: {plugins: [externalizeDepsPlugin()]},preload: {plugins: [externalizeDepsPlugin()]},renderer: {resolve: {alias: {'@renderer': resolve('src/renderer/src'),"@": resolve(__dirname, "./src/renderer/src")}},plugins: [react(), tailwindcss()]}
})

ok，现在我们继续下一个步骤
在这里插入图片描述
虽然步骤上的style文件是src/styles/globals.css，但实际上我们可以自己灵活点改，下面是原先创建 electron 项目的时候自动生成的模板

我们直接删除所有模板代码（此时运行 npm run dev 就会是一片空白）

现在我们继续，把 shadcn的global.css 里的代码复制到 assets 目录的 main.css 里:
在这里插入图片描述

下一步我们添加一个helper文件：

下一步我们创建 components.json 文件（“components” 名字不能改）

这个文件我们在 electron 根目录下创建

{"$schema": "https://ui.shadcn.com/schema.json","style": "new-york","rsc": false,"tsx": true,"tailwind": {"config": "","css": "src/renderer/src/assets/main.css","baseColor": "neutral","cssVariables": true,"prefix": ""},"aliases": {"components": "@/components","utils": "@/lib/utils","ui": "@/components/ui","lib": "@/lib","hooks": "@/hooks"},"iconLibrary": "lucide"
}

注意，我修改了 tailwind->css 的内容，因为我们刚刚写的css代码的文件名是 assets/main.css ，而教程里指的是 styles/globals.css

OK，此时，我们就已经成功安装好shadcn了

2. 试试安装一个shadcn组件

此时运行 npm run dev，发现程序里什么都是空白的
在这里插入图片描述
现在我们随便添加一个shadcn组件来测试下，添加过程是这样的

我们来到shadcn的组件库去，找到你自己需要的组件。我这里举个例子，用Dialog
在这里插入图片描述

下面有一个组件安装命令，我们就是通过这个命令来安装组件的

npx shadcn@latest add dialog

在这里插入图片描述

可以看到，当我们用命令安装好组件之后，src目录下瞬间多出了个components目录，里面还有我们所创建的dialog组件的tsx文件

在这里插入图片描述
我们复制样例代码到App.tsx中，看看效果怎么样
（这个样例代码还用到了button input label，我们同理一个个用命令行安装即可）

import { Button } from "@/components/ui/button"
import {Dialog,DialogClose,DialogContent,DialogDescription,DialogFooter,DialogHeader,DialogTitle,DialogTrigger,
} from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"export function DialogDemo() {return (<Dialog><form><DialogTrigger asChild><Button variant="outline">Open Dialog</Button></DialogTrigger><DialogContent className="sm:max-w-[425px]"><DialogHeader><DialogTitle>Edit profile</DialogTitle><DialogDescription>Make changes to your profile here. Click save when you&apos;redone.</DialogDescription></DialogHeader><div className="grid gap-4"><div className="grid gap-3"><Label htmlFor="name-1">Name</Label><Input id="name-1" name="name" defaultValue="Pedro Duarte" /></div><div className="grid gap-3"><Label htmlFor="username-1">Username</Label><Input id="username-1" name="username" defaultValue="@peduarte" /></div></div><DialogFooter><DialogClose asChild><Button variant="outline">Cancel</Button></DialogClose><Button type="submit">Save changes</Button></DialogFooter></DialogContent></form></Dialog>)
}function App(): React.JSX.Element {return (<><DialogDemo></DialogDemo></>)
}export default App