vite 4.4.11react 18.2.0react-dom 18.2.0react-router-dom 6.16.0antd 5.9.4less 4.2.0sass 1.69.0stylus 0.60.0 ※注: 代码区域每行开头的:"+" 表示新增"-" 表示删除"M" 表示修改 1 Electron核心概念 学习Electron最先要掌握的就是他的主进程与渲染进程概念。网上很多
本次开发使用了electron-vite-react,具体构建和配置就是用它的默认配置就好了,值得注意的是,本次需要要做三个窗体,一个主窗体,一个截屏窗体,一个是图片展示窗体,于是索性就引入react-router-dom了。 先来安装一下: 1 2 3 4 5 git clone https://github.com/electron-vite/electron-vite-react pnpm add rea...
基于Vite 4.x搭建 集成Sass/Scss/Less/Stylus 集成Ant Design 5.x 集成react-router-dom 基于send与on/once实现主进程与渲染进程通信 基于invoke与handle实现主进程与渲染进程通信 讲解应用图标、APP窗口大小、取消跨域限制、禁止DevTools等常用配置 讲解如何解决下载和编译时遇到的各种问题 讲解如何进行V8字节源代码保护...
main.js改为加载文件的方式 更改vite.config.ts // vite.config.tsimport{ defineConfig }from'vite'importreactfrom'@vitejs/plugin-react'importpathfrom'path'// 新增// https://vitejs.dev/config/exportdefaultdefineConfig({base:`file://${path.join(__dirname,"/dist")}`,// 新增plugins: [react(...
可以发现我们使用了BrowserRouter模式的路由 推测原因 我认为在electron中,只是使用了浏览器来直接显示html页面,而没有正确处理路由BrowserRouter模式 验证 使用vite build打包html页面,不用electron显示,而是在nginx中测试在nginx中发现能正常路由 解决方法 改用HashRouter模式路由,完美解决。 <HashRouter> <React.StrictMode...
Electron-React-mateOS支持桌面多级路由菜单,自定义配置route路由表。搭配arco-design组件库,支持暗黑+亮色模式。 技术框架 编辑器:VScode 框架技术:vite4+react18+zustand+react-router@6 跨端技术:electron^27.0.1 打包工具:electron-builder^24.6.4 UI组件库:arco-design (字节react轻量级UI组件库) 图表组件:biz...
bash npm start 这将启动Electron应用程序,并加载由Vite提供的React应用。 要构建生产版本,首先运行Vite的构建命令: bash npm run build 然后,你可以通过Electron直接运行构建后的文件: bash npm start 这样,你就成功地将Electron、Vite和React集成到了一个应用程序中,并可以构建和运行它了。
{ "react": "^17.0.2", "react-dom": "^17.0.2" }, "devDependencies": { "@types/react": "^17.0.33", "@types/react-dom": "^17.0.10", "@vitejs/plugin-react": "^1.0.7", "concurrently": "^7.0.0", "cross-env": "^7.0.3", "electron": "^17.1.2", "typescript": "^...
基于跨平台技术Electron集成Vite.js构建桌面端React18后台管理系统应用ElectronRAdmin。支持dark/light主题、中英文/繁体国际化、动态组件权限验证、内置三种布局模板、tabs路由菜单标签栏等功能。 使用技术 编程工具:vscode 框架技术:electron27+vite^4.4.5+react18+zustand+react-router ...
electron + react + ts + vite的项目结构的说明 src 目录存放主要的。其中的 components 文件夹用于存放各种组件。pages 文件夹可能包含页面相关的代码。utils 文件夹通常有工具函数。electron 相关代码可能在特定的文件夹中。公共样式文件可能存放在 styles 文件夹。assets 目录用于存储静态资源。接口定义文件可能在 ...