跨平台桌面应用开发：解锁 Electron 与 shadcn/ui 的潜力

本文部分内容使用豆包AI进行撰写和润色

在当今数字化转型加速推进的时代，桌面应用程序作为各行各业的关键支撑，持续发挥着不可替代的作用。从医疗领域专业精准的影像诊断软件，助力医生快速洞察病情、制定治疗方案；到建筑设计行业复杂且功能强大的建模工具，将设计师脑海中的蓝图完美转化为虚拟模型；再到电商运营不可或缺的店铺管理软件，高效处理订单、库存等海量数据，桌面应用凭借其对本地资源的深度掌控、卓越的性能表现以及高度定制化的功能，稳坐软件生态系统的核心宝座。

然而，随着操作系统领域呈现出 Windows、Mac、Linux 等多足鼎立的格局，且各平台都拥有庞大而忠实的用户群体，开发者面临着前所未有的挑战。若为每个操作系统逐一开发原生应用，不仅意味着要投入天文数字般的时间、人力与资金成本，还要应对不同平台在 API 调用、界面设计规范、硬件适配等诸多方面的差异，宛如在荆棘丛中艰难前行。在此背景下，跨平台桌面应用开发应运而生，成为开发者冲破困境、追求高效的希望之光。

当下，市面上涌现出一系列令人瞩目的跨平台桌面应用开发框架，它们宛如璀璨星辰，照亮了开发者前行的道路。

首先来看.NET 的 MAUI（Multi-platform App UI），作为微软精心打造的新一代跨平台利器，它构建于.NET 6 及更高版本之上，整合了 Xamarin.Forms 的跨平台精髓，并进行了全方位优化。开发者借助 C# 语言与统一的 API，能够轻松构建适配 Windows、Mac、Linux、iOS 和 Android 等多平台的应用。以企业级资源管理软件为例，MAUI 可充分利用系统底层功能，实现数据的高速读写与精准管控，同时凭借丰富的 UI 组件库设计出简洁易用的操作界面，为企业运营增效赋能。依托微软强大的技术生态与海量文档支持，开发者遇到难题时能迅速找到解法，大大加快开发节奏。

Avalonia UI 同样不容小觑，这一开源框架基于.NET 构建，采用 XAML 进行界面设计，与 WPF 和 UWP 有着相似的开发体验。它支持多种编程语言，如 C#、F# 等，为开发者提供了丰富的选择。在开发多媒体编辑软件时，Avalonia UI 能充分发挥其性能优势，流畅处理视频、音频等复杂素材，其高度定制化的组件库可满足创意工作者对界面精美度与功能性的严苛要求。而且，活跃的开源社区为其持续注入活力，不断有新特性、新优化涌现，助力开发者打造出惊艳的跨平台应用。

而 NodeJS 的 Electron 框架，则以一种别具一格的创新姿态闯入开发者视野。诞生于开源圣地 GitHub 的 Electron，打破了传统桌面开发与前端技术之间的隔阂，将 HTML、CSS、JavaScript 这些 Web 开发领域的 “当家花旦” 引入桌面应用世界。这意味着，只要掌握前端知识，开发者就能如鱼得水，轻松将普通的 HTML 页面转化为具有强大本地交互能力的桌面程序，自如访问本地文件、调用系统通知、与硬件深度交互，为不同操作系统用户呈献一致且流畅的体验，实现知识的高效复用。

今天，我们要深入探索的是 Electron 框架与 shadcn/ui 的协同开发之旅，看看它们如何碰撞出创意的火花，助力开发者打造出惊艳的跨平台桌面应用。

Electron 框架简介#

Electron 源自 GitHub 这个充满创新活力的开源温床，它就像一座神奇的桥梁，无缝连接 Web 页面与桌面应用的两个天地。开发者凭借前端开发技能，就能让平凡的 HTML 页面摇身一变，成为具备强大本地交互功能的桌面应用。想象一下，那些原本只能在浏览器中运行的网页，通过 Electron 的 “魔力”，瞬间拥有了与操作系统深度交互的本领，能够轻松穿梭于本地文件系统，精准调用系统通知，甚至与硬件设备亲密 “对话”。这一特性对于广大前端开发者而言，无疑是一场知识盛宴，无需再花费大量精力钻研全新的桌面开发语言，就能凭借已有的前端技能，跨越平台差异，为不同操作系统用户递上优质体验。

shadcn/ui 简介#

shadcn/ui 恰似一位专业的美工与交互设计师，专注于为前端应用提供精美、可定制且易于使用的 UI 组件。它基于 Tailwind CSS 构建而成，在 Electron 应用开发进程中，带来了丰富多样的按钮、表单、模态框等组件样式，无论是简约时尚风，还是华丽炫酷范，它都能轻松拿捏。其遵循原子化 CSS 理念，开发者只需巧妙组合简单的类名，就能快速构建出复杂而精致的界面，在提升应用视觉吸引力与用户体验方面堪称 “得力助手”，同时还能保持代码的简洁与高效。

基于 Electron 和 shadcn/ui 的开发过程#

开发环境搭建#

1. 安装 Node.js：这是开启整个 Electron 与 shadcn/ui 开发之旅的基石。确保你的系统已经成功安装 Node.js，打开终端窗口，输入简单的指令 node -v，即可快速查询 Node.js 的版本信息。为了避免后续开发过程中可能出现的兼容性问题，建议紧跟官方步伐，选用最新且稳定的版本。只有在 Node.js 安装就绪后，后续基于 npm 的各种依赖安装才能顺利进行。
2. 除了用npm做包管理器,还可以使用Yarn和pnpm，通过指令corepack enable yarn来启用 Yarn，或者通过指令corepack enable pnpm来启用 pnpm。

创建项目#

1. 初始化项目：得益于 Vite 卓越的前端开发体验，越来越多的 Electron 项目也开始应用它来构建开发，但是配置相对复杂，繁琐，所以我们使用electron-vite来构建开发环境。打开终端窗口，输入以下指令，即可快速创建一个基于 Electron 的项目。

yarn create @quick-start/electron my-app --template react-ts

2. 安装shadcn/ui依赖项，此操作需要在项目根目录下执行，参考shadcn/ui的Vite安装指南和手动安装指南。

yarn add tailwindcss-animate class-variance-authority clsx tailwind-merge lucide-react

3. 安装Tailwind CSS，目的是为项目创建一个 Tailwind CSS 配置文件 tailwind.config.js postcss.config.js。

yarn add -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

4. 更新 tsconfig.json

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

5. 更新 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": {
      "@/*": ["./src/renderer/src/*"],
      "@renderer/*": ["src/renderer/src/*"]
    }
  }
}

6. 更新 electron.vite.config.ts

import { resolve } from 'path'
import { defineConfig, externalizeDepsPlugin } from 'electron-vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  main: {
    plugins: [externalizeDepsPlugin()]
  },
  preload: {
    plugins: [externalizeDepsPlugin()]
  },
  renderer: {
    resolve: {
      alias: {
        "@": resolve(__dirname, "./src/renderer/src"),
        '@renderer': resolve('src/renderer/src')
      }
    },
    plugins: [react()]
  }
})

7. 更新 src/renderer/src/assets/base.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 47.4% 11.2%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 47.4% 11.2%;
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 100% 50%;
    --destructive-foreground: 210 40% 98%;
    --ring: 215 20.2% 65.1%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 224 71% 4%;
    --foreground: 213 31% 91%;
    --muted: 223 47% 11%;
    --muted-foreground: 215.4 16.3% 56.9%;
    --accent: 216 34% 17%;
    --accent-foreground: 210 40% 98%;
    --popover: 224 71% 4%;
    --popover-foreground: 215 20.2% 65.1%;
    --border: 216 34% 17%;
    --input: 216 34% 17%;
    --card: 224 71% 4%;
    --card-foreground: 213 31% 91%;
    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 1.2%;
    --secondary: 222.2 47.4% 11.2%;
    --secondary-foreground: 210 40% 98%;
    --destructive: 0 63% 31%;
    --destructive-foreground: 210 40% 98%;
    --ring: 216 34% 17%;
    --radius: 0.5rem;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply font-sans antialiased bg-background text-foreground;
  }
}

导入shadcn/ui#

Blocks是shadcn/ui的组件库，提供了一套可定制的UI组件，包括按钮、输入框、卡片、表格等。我们可以通过Blocks来快速构建用户界面，并使用shadcn/ui提供的样式和主题定制来创建具有一致外观和感觉的界面。

选择组件复制指令执行，比如导入 login 组件，复制指令 npx shadcn@latest add login-01 执行，此操作会在项目根目录下创建一个名为 components.json 的配置文件，并导入相关的shadcn/ui组件。

{
  "style": "new-york",
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "src/renderer/src/assets/base.css",
    "baseColor": "zinc",
    "cssVariables": true,
    "prefix": ""
  },
  "rsc": false,
  "aliases": {
    "utils": "@/lib/utils",
    "components": "@/components",
    "lib": "@/lib",
    "hooks": "@/lib/hooks",
    "ui": "@/components/ui"
  },
  "iconLibrary": "lucide"
}

修改App.tsx，加入react路由#

import { BrowserRouter as Router, Route, Routes, Navigate } from 'react-router-dom';
import Dashboard from './app/dashboard/page';
import Login from './app/login/page';

function App(): JSX.Element {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Navigate to="/login" replace />} />
        <Route path="/login" element={<Login />} />
        <Route path="/dashboard" element={<Dashboard />} />
      </Routes>
    </Router>
  )
}

export default App

运行与调试#

在终端执行 yarn dev，刹那间，你的首个 Electron 桌面应用将如破茧之蝶，带着你的创意与期望，轻盈地展现在眼前，开启一场属于你的技术传奇。在运行过程中，密切关注应用的表现，若发现问题，及时回到代码中进行调试。你可以利用浏览器的开发者工具，如 Chrome DevTools，在 Electron 应用中也能开启类似的调试模式，方便查找 JavaScript 代码、CSS 样式等方面的问题。

相关链接

1. https://ui.shadcn.com/
2. https://cn.electron-vite.org/
3. https://github.com/huangmingji/shadcn-electron-app