mixone

mixone

English | 中文

通用 Electron 桌面应用脚手架。只需依赖 mixone，即可开箱支持 Vue 3 / React 19 / react-native-web 三种渲染层，内置 Vite + Electron 快速启动方案。

特性

• 零配置 – mixone create 一键生成项目，依赖自动安装
• 三渲染层 – Vue 3、React 19、react-native-web 可选
• TypeScript – --ts 生成 TS 模板，主进程 + 渲染层全类型覆盖
• V8 字节码 – mixone build --bytecode 自动编译主进程为 .jsc，保护源码
• 内置 IPC – 窗口管理、对话框、文件系统、剪贴板、Shell API 开箱即用
• 启动闪屏 – 纯 HTML 闪屏秒出，支持自定义 splash.html
• 依赖收敛 – vue/react/vite/electron/bytenode 等全由 mixone 提供

快速开始

# 创建项目
npm create mixone@latest my-app

# 或全局安装后创建
npm install -g mixone
mixone create my-app

cd my-app
npm run dev      # 开发模式（Vite + Electron，支持 HMR）
npm run build    # 构建渲染层到 dist/
npm run start    # 启动（electron .）

CLI 命令

mixone create

mixone create <name> [options]

mixone dev

启动开发模式。自动检测 TS 项目并编译主进程，端口被占用时自动切换。

mixone dev              # 自动从 5173 开始检测
mixone dev --port 3000  # 从指定端口开始检测

mixone build

构建渲染层到 dist/。

mixone build              # 仅构建渲染层
mixone build --bytecode   # 构建 + 编译主进程为 V8 字节码

mixone build:bytecode

仅编译主进程字节码（不构建渲染层）。

mixone build:bytecode

其他命令

mixone doctor    # 检查环境与项目状态
mixone list      # 列出可用模板和 UI 库

模板

配合 --ts 生成 TypeScript 变体。

mixone create app --template vue --ts
mixone create app --template react --ts

UI 库

mixone create app --template vue --ui element-plus
mixone create app --template react --ui antd

不选 UI 库直接回车即可。

项目结构

my-app/
├── main.js                 # Electron 主进程（CommonJS）
├── preload.js              # contextBridge IPC 桥接
├── appConfig.js            # userData/缓存重定向到系统临时目录
├── mixone.vite.config.js   # Vite 配置
├── package.json            # 依赖 mixone + electron-builder
├── tsconfig.json           # TypeScript 配置（--ts 模式）
└── src/                    # 渲染层
    ├── main.js             # 入口
    ├── App.vue / App.jsx   # 根组件
    ├── router.js           # 路由配置
    ├── components/         # 可复用组件
    ├── utils/              # 工具函数
    ├── assets/             # 静态资源
    └── views/ / pages/     # 页面组件

内置 IPC

生成的项目通过 window.mixone 暴露以下 API：

const mixone = window.mixone

// 系统信息
mixone.platform    // 'win32' | 'darwin' | 'linux'
mixone.version     // Electron 版本
mixone.node        // Node.js 版本

// 窗口管理
mixone.window.open({ url: 'https://example.com', width: 800, height: 600 })
mixone.window.openModal({ url: '/sub', width: 520, height: 420 })
mixone.window.close()
mixone.window.minimize()
mixone.window.maximize()

// 对话框
await mixone.dialog.openFile({ filters: [{ name: 'Text', extensions: ['txt'] }] })
await mixone.dialog.saveFile({ defaultPath: 'untitled.txt' })
await mixone.dialog.messageBox({ type: 'info', message: 'Hello' })

// 文件系统
const { content } = await mixone.fs.readText('/path/to/file')
await mixone.fs.writeText('/path/to/file', 'content')
const { entries } = await mixone.fs.readDir('/path/to/dir')
await mixone.fs.mkdir('/path/to/dir', { recursive: true })
await mixone.fs.rename('/old', '/new')
await mixone.fs.copyFile('/src', '/dest')
await mixone.fs.appendText('/path', 'more')
const { data } = await mixone.fs.readJson('/config.json')
await mixone.fs.writeJson('/config.json', { key: 'value' })

// 剪贴板
await mixone.clipboard.writeText('hello')
const text = await mixone.clipboard.readText()
await mixone.clipboard.writeHtml('<b>bold</b>')
await mixone.clipboard.clear()

// Shell
await mixone.shell.openExternal('https://example.com')
await mixone.shell.showItemInFolder('/path/to/file')
mixone.shell.beep()

// 应用
const info = await mixone.app.info()
mixone.app.relaunch()
mixone.app.quit()

打包发布

模板已内置 electron-builder 配置，直接运行：

npm run build:desktop    # 构建 + 打包当前平台

输出目录：release/

V8 字节码

mixone build --bytecode 会将 main.js、preload.js、appConfig.js 编译成 .jsc 字节码文件，保护源码。

mixone build --bytecode           # 构建 + 字节码
MIXONE_NO_BYTECODE=1 mixone build  # 禁用字节码

或在 package.json 中设置：

{ "mixone": { "bytecode": false } }

自定义闪屏

在项目根目录创建 splash.html 即可替换默认闪屏。

<!DOCTYPE html>
<html>
<head><style>body { background: #0f172a; color: white; }</style></head>
<body><h1>Loading...</h1></body>
</html>

机制

• launcher 模式 – Vite dev server 在 Node 进程内直接 spawn（不经过 Electron），就绪后再 spawn Electron 连接 dev server，启动速度更快
• 依赖收敛 – vue/react/vite/electron/typescript/bytenode 等全由 mixone 提供
• 缓存隔离 – userData/sessionData/chromium-cache 重定向到 %TEMP%/<包名>，避免多实例冲突

贡献

• Issue 反馈：https://github.com/qew4/mixone-example/issues
• 附上 mixone doctor 输出与最小复现步骤

License

MIT