Ant Design Electron 桌面应用搭建指南从登录页到分发上架【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/GitHub_Trending/an/ant-design给团队的内部工具套一层桌面壳是 Electron 最常见的落地场景之一。这篇指南带你走完整条链路用 Ant Design 加 Electron 把内部浏览器工具改成桌面应用先做出一个带登录页、带品牌配色的最小界面再把它打成可分发的安装包。读完你能独立搭出一个可运行的 React 桌面应用脚手架并知道打包和性能环节的常规处理办法。从一个具体场景说起假设内部工具有个登录页品牌色的主按钮、两个带校验的输入框、一行报错提示。网页版已经有了现在你要把它变成桌面应用要求打开有原生窗口、交互风格统一、最后能发给 Windows 和 macOS 的同事。按这个顺序推进先装好环境跑通一个空壳再把登录表单、按钮、主题三个高频场景逐个落进去最后处理打包分发和性能。每一步都只解决一个问题不提前展开。选型为什么是这两个组合先看 Ant Design 这一侧。它是企业级设计语言加 React 组件库按钮间距、字号、颜色都有统一规范。桌面工具里大量是表单、表格、弹窗这类标准件用现成组件能省掉一轮看起来可以、细节再调的返工。组件文档里每个 API 都配了可运行的 demo改参数就能看效果。再看 Electron 这一侧。它本质是把 Chromium 和 Node.js 打进一个进程让你直接用 Web 技术写界面同时能调用系统菜单、文件对话框、原生通知。对内部工具来说跨平台和能访问本地资源这两个能力就够用了。取舍也要说清楚Electron 会额外占用内存如果你的工具只是套壳网页浏览器加书签可能更划算。选它的理由通常是——团队已经会 React 和 TypeScript再学一套原生技术栈的代价更高。最短路径跑通一个应用先准备 Node.js 环境然后把 Ant Design 仓库克隆到本地写代码时随时对照文档和 demogit clone https://gitcode.com/GitHub_Trending/an/ant-design cd my-antd-electron npm install antd第一条命令拿到的是文档仓库用来查 API 和示例第二条把组件库装进你自己的 Electron 项目。Electron 项目可以用官方脚手架生成也可以用 electron-vite、electron-forge 等模板差别不大关键是先跑起来。主进程里建一个 BrowserWindow 加载本地页面渲染进程里写最小界面import { Button, Space } from antd; export default () ( Space Button typeprimary主要操作/Button Button次要操作/Button /Space );Space负责按钮之间的间距。窗口里出现两个样式正确的按钮就说明环境通了接下来再往里面填功能。高频场景拆解下面三个场景覆盖了桌面工具界面的大部分工作量都按先配置、后看效果的方式写。登录表单Form 与校验规则登录页的核心是 Form 组件的三项配置字段名、校验规则、提交回调。贴全量代码没有意义核心就这三行Form onFinish{onFinish} Form.Item nameusername rules{[{ required: true, message: 请输入用户名 }]} Input / /Form.Item /Form密码框换成Input.Password提交按钮用htmlTypesubmit交给表单触发。onFinish只在所有校验通过后才会被调用报错提示由组件自己渲染你不用手写状态。完整的登录页写法在 Form 文档的 demo 里直接抄。操作按钮类型与加载态按钮场景集中在表格行操作和表单底部。主操作用typeprimary其余降级为默认或文本按钮提交请求期间加上loading属性防止重复点击。图标放icon属性里不直接塞进 children。各种组合幽灵按钮、危险按钮、按钮组在 Button 文档都有现成 demo按场景对号入座即可。Ant Design 主题定制配置品牌配色不需要改组件内部样式。在应用根部放一个ConfigProvider通过theme.token覆盖全局 tokenConfigProvider theme{{ token: { colorPrimary: #1f6feb, borderRadius: 6 } }} App / /ConfigProvidercolorPrimary决定按钮、链接、选中态的主色borderRadius统一圆角。所有组件读同一套 token改一处全局生效。要切换暗色模式把algorithm换成暗色算法即可具体 token 含义参考 主题定制文档。坑点与性能遇到问题时查这里Electron 打包步骤开发完成后用 electron-builder 出包。在 Electron 项目的package.json里配置各平台的构建目标Windows 用 nsis、macOS 用 dmg、Linux 用 AppImage然后运行npm run build加对应平台的 dist 命令。产物里是带安装器的可执行程序直接发给同事就行。注意files字段只保留运行必需的文件开发依赖不要带进去。组件按需加载桌面端的包体直接决定启动速度。Ant Design 5.x 是 ESM 模块打包器webpack、vite默认就能做 tree-shaking你import { Button } from antd没用的组件不会进产物。旧项目如果全量引入了整包样式按 Tree Shaking 说明 检查一遍打包配置。启动慢、内存高怎么办启动慢先查包体打开开发者工具的 source map看最大的几个 chunk 是什么然后把不常用的页面改成路由级懒加载。内存高常见于表格一次性渲染几千行给 Table 开虚拟滚动再配合app.commandLine限制并行渲染进程通常能压回正常水平。接下来可以做的三件事翻一遍 主题定制文档把algorithm换成暗色算法做出夜间模式。跑一次按平台的打包命令拿到 Windows 和 macOS 两个产物发到同事机器上验证。把登录页接上真实校验和记住密码对照 Form 文档 的异步校验 demo 改。【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/GitHub_Trending/an/ant-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Ant Design + Electron 桌面应用搭建指南：从登录页到分发上架
Ant Design Electron 桌面应用搭建指南从登录页到分发上架【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/GitHub_Trending/an/ant-design给团队的内部工具套一层桌面壳是 Electron 最常见的落地场景之一。这篇指南带你走完整条链路用 Ant Design 加 Electron 把内部浏览器工具改成桌面应用先做出一个带登录页、带品牌配色的最小界面再把它打成可分发的安装包。读完你能独立搭出一个可运行的 React 桌面应用脚手架并知道打包和性能环节的常规处理办法。从一个具体场景说起假设内部工具有个登录页品牌色的主按钮、两个带校验的输入框、一行报错提示。网页版已经有了现在你要把它变成桌面应用要求打开有原生窗口、交互风格统一、最后能发给 Windows 和 macOS 的同事。按这个顺序推进先装好环境跑通一个空壳再把登录表单、按钮、主题三个高频场景逐个落进去最后处理打包分发和性能。每一步都只解决一个问题不提前展开。选型为什么是这两个组合先看 Ant Design 这一侧。它是企业级设计语言加 React 组件库按钮间距、字号、颜色都有统一规范。桌面工具里大量是表单、表格、弹窗这类标准件用现成组件能省掉一轮看起来可以、细节再调的返工。组件文档里每个 API 都配了可运行的 demo改参数就能看效果。再看 Electron 这一侧。它本质是把 Chromium 和 Node.js 打进一个进程让你直接用 Web 技术写界面同时能调用系统菜单、文件对话框、原生通知。对内部工具来说跨平台和能访问本地资源这两个能力就够用了。取舍也要说清楚Electron 会额外占用内存如果你的工具只是套壳网页浏览器加书签可能更划算。选它的理由通常是——团队已经会 React 和 TypeScript再学一套原生技术栈的代价更高。最短路径跑通一个应用先准备 Node.js 环境然后把 Ant Design 仓库克隆到本地写代码时随时对照文档和 demogit clone https://gitcode.com/GitHub_Trending/an/ant-design cd my-antd-electron npm install antd第一条命令拿到的是文档仓库用来查 API 和示例第二条把组件库装进你自己的 Electron 项目。Electron 项目可以用官方脚手架生成也可以用 electron-vite、electron-forge 等模板差别不大关键是先跑起来。主进程里建一个 BrowserWindow 加载本地页面渲染进程里写最小界面import { Button, Space } from antd; export default () ( Space Button typeprimary主要操作/Button Button次要操作/Button /Space );Space负责按钮之间的间距。窗口里出现两个样式正确的按钮就说明环境通了接下来再往里面填功能。高频场景拆解下面三个场景覆盖了桌面工具界面的大部分工作量都按先配置、后看效果的方式写。登录表单Form 与校验规则登录页的核心是 Form 组件的三项配置字段名、校验规则、提交回调。贴全量代码没有意义核心就这三行Form onFinish{onFinish} Form.Item nameusername rules{[{ required: true, message: 请输入用户名 }]} Input / /Form.Item /Form密码框换成Input.Password提交按钮用htmlTypesubmit交给表单触发。onFinish只在所有校验通过后才会被调用报错提示由组件自己渲染你不用手写状态。完整的登录页写法在 Form 文档的 demo 里直接抄。操作按钮类型与加载态按钮场景集中在表格行操作和表单底部。主操作用typeprimary其余降级为默认或文本按钮提交请求期间加上loading属性防止重复点击。图标放icon属性里不直接塞进 children。各种组合幽灵按钮、危险按钮、按钮组在 Button 文档都有现成 demo按场景对号入座即可。Ant Design 主题定制配置品牌配色不需要改组件内部样式。在应用根部放一个ConfigProvider通过theme.token覆盖全局 tokenConfigProvider theme{{ token: { colorPrimary: #1f6feb, borderRadius: 6 } }} App / /ConfigProvidercolorPrimary决定按钮、链接、选中态的主色borderRadius统一圆角。所有组件读同一套 token改一处全局生效。要切换暗色模式把algorithm换成暗色算法即可具体 token 含义参考 主题定制文档。坑点与性能遇到问题时查这里Electron 打包步骤开发完成后用 electron-builder 出包。在 Electron 项目的package.json里配置各平台的构建目标Windows 用 nsis、macOS 用 dmg、Linux 用 AppImage然后运行npm run build加对应平台的 dist 命令。产物里是带安装器的可执行程序直接发给同事就行。注意files字段只保留运行必需的文件开发依赖不要带进去。组件按需加载桌面端的包体直接决定启动速度。Ant Design 5.x 是 ESM 模块打包器webpack、vite默认就能做 tree-shaking你import { Button } from antd没用的组件不会进产物。旧项目如果全量引入了整包样式按 Tree Shaking 说明 检查一遍打包配置。启动慢、内存高怎么办启动慢先查包体打开开发者工具的 source map看最大的几个 chunk 是什么然后把不常用的页面改成路由级懒加载。内存高常见于表格一次性渲染几千行给 Table 开虚拟滚动再配合app.commandLine限制并行渲染进程通常能压回正常水平。接下来可以做的三件事翻一遍 主题定制文档把algorithm换成暗色算法做出夜间模式。跑一次按平台的打包命令拿到 Windows 和 macOS 两个产物发到同事机器上验证。把登录页接上真实校验和记住密码对照 Form 文档 的异步校验 demo 改。【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/GitHub_Trending/an/ant-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考