Electron Vite项目配置shadcn/ui

手动安装

官网：

安装tailwindcss

详情： Electron Vite 项目配置 tailwindcss | 知兀的博客

安装依赖

1
pnpm add shadcn class-variance-authority cn lucide-react tw-animate-css
bash

不设置别名，用默认的

文档第三步是配置别名，我们这是electron-vite项目，不设置：

普通纯前端 Vite 项目只有一套代码，@直接映射src很方便
但 Electron‑vite 是三进程架构：Main 主进程 + Preload 预加载 + Renderer 渲染进程，三套代码放在同一个仓库根目录，共享一份根tsconfig.json

配置style

和之前配置的tailwind css样式文件放在一起

添加lib/utils.ts

src/renderer/src/lib/utils.ts

创建components.json文件

官方文档要求根目录下创建文件

但因为使用electron-vite，渲染进程在src/renderer/src下，而且已经配置了别名@renderer，所以在根目录下创建后要统一修改

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "base-nova",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "config": "",
-    "css": "src/styles/globals.css",
+    "css": "@renderer/assets/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
-   "components": "@/components",
-    "utils": "@/lib/utils",
-    "ui": "@/components/ui",
-    "lib": "@/lib",
-    "hooks": "@/hooks"
+    "components": "@renderer/components",
+    "utils": "@renderer/lib/utils",
+    "ui": "@renderer/components/ui",
+    "lib": "@renderer/lib",
+    "hooks": "@renderer/hooks"
  },
  "iconLibrary": "lucide"
}
diff

添加组件

官方文档下选择Manual，最后就能添加组件了

手动安装#

安装tailwindcss#

安装依赖#

不设置别名，用默认的#

配置style#

添加lib/utils.ts#

创建components.json文件#

添加组件#