動態

詳情

跨平台桌面應用開發：解鎖 Electron 與 shadcn/ui 的潛力 - 動態詳情

03:53 上午 · 11月 07 ,2025

本文部分內容使用豆包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 的開發過程

開發環境搭建

安裝 Node.js：這是開啓整個 Electron 與 shadcn/ui 開發之旅的基石。確保你的系統已經成功安裝 Node.js，打開終端窗口，輸入簡單的指令 node -v，即可快速查詢 Node.js 的版本信息。為了避免後續開發過程中可能出現的兼容性問題，建議緊跟官方步伐，選用最新且穩定的版本。只有在 Node.js 安裝就緒後，後續基於 npm 的各種依賴安裝才能順利進行。
除了用npm做包管理器,還可以使用Yarn和pnpm，通過指令corepack enable yarn來啓用 Yarn，或者通過指令corepack enable pnpm來啓用 pnpm。

創建項目

初始化項目：得益於 Vite 卓越的前端開發體驗，越來越多的 Electron 項目也開始應用它來構建開發，但是配置相對複雜，繁瑣，所以我們使用electron-vite來構建開發環境。打開終端窗口，輸入以下指令，即可快速創建一個基於 Electron 的項目。

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

安裝shadcn/ui依賴項，此操作需要在項目根目錄下執行，參考shadcn/ui的Vite安裝指南和手動安裝指南。

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

安裝Tailwind CSS，目的是為項目創建一個 Tailwind CSS 配置文件 tailwind.config.js postcss.config.js。

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

更新 tsconfig.json

{
  "files": [],
  "references": [{ "path": "./tsconfig.node.json" }, { "path": "./tsconfig.web.json" }],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./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": {
      "@/*": ["./src/renderer/src/*"],
      "@renderer/*": ["src/renderer/src/*"]
    }
  }
}

更新 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()]
  }
})

更新 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 樣式等方面的問題。

黃明基動態日志

@huangmingji

標簽

前端 (1157)

react (166)

SemanticKernel (20)

動態

跨平台桌面應用開發：解鎖 Electron 與 shadcn/ui 的潛力 - 動態詳情

Electron 框架簡介

shadcn/ui 簡介

基於 Electron 和 shadcn/ui 的開發過程

開發環境搭建

創建項目

導入shadcn/ui

修改App.tsx，加入react路由

運行與調試

相關鏈接

Add a new 評論

黃明基 動態日志

@huangmingji

標簽

前端 (1157)

react (166)

SemanticKernel (20)

動態

跨平台桌面應用開發：解鎖 Electron 與 shadcn/ui 的潛力 - 動態 詳情

Electron 框架簡介

shadcn/ui 簡介

基於 Electron 和 shadcn/ui 的開發過程

開發環境搭建

創建項目

導入shadcn/ui

修改App.tsx，加入react路由

運行與調試

相關鏈接

Add a new 評論

黃明基動態日志

跨平台桌面應用開發：解鎖 Electron 與 shadcn/ui 的潛力 - 動態詳情