electron-vue-init-skill

Electron Vue3 Init Skill

基于 electron-vite（2025 年事实标准）+ Vue3 + TypeScript，面向完全不懂编程的小白，一键生成标准化、开箱即用的桌面端应用骨架。

技术选型（2025 最佳实践）

维度	选型	理由
构建工具	electron-vite	替代旧方案（vite-plugin-electron / electron-forge + webpack），社区主流
前端框架	Vue 3 + TypeScript	与 vue-generate-skill 保持一致
打包工具	electron-builder	成熟稳定，支持多平台
IPC 通信	contextBridge + invoke/handle	安全最佳实践，禁止 nodeIntegration
状态管理	Pinia（Setup Store）	与 vue-generate-skill 一致
请求层	fetch（复用 frontend-request-skill）	不重复造轮子

与 vue-generate-skill 的区别

维度	vue-generate-skill	本 skill
目标用户	前端开发者	零基础小白
运行环境	浏览器	桌面端（Electron）
构建工具	Vite	electron-vite（三进程独立构建）
环境安装	用户自己装	自动检测 + 自动安装
打包	无	electron-builder 一键打包
窗口管理	无	原生窗口控制（最小化/最大化/关闭）
系统托盘	无	系统托盘支持
IPC 通信	无	主进程/渲染进程安全通信
默认页面	无	页面中心显示"你好，我是考拉搞AI"
交互次数	多个技术问题	最多 2 个问题

不重复造轮子：

• 请求层复用 frontend-request-skill（桌面端同样用 fetch）
• Vue3 部分与 vue-generate-skill 保持一致的项目结构和规范
• 主题系统复用 vue-theme-skill 的 Token 体系

依赖

• vue-generate-skill：Vue3 项目结构、组件规范
• vue-theme-skill：设计 Token 体系（CSS 变量）
• frontend-request-skill：请求层规范（用于桌面端调用后端 API）

核心能力清单（9 项）

#	能力	说明
1	环境探测	自动检测 Node.js 版本（>=18）、npm、操作系统
2	自动安装	初始化 npm、安装依赖
3	一键启动	npm run dev：electron-vite 同时启动主进程 + 渲染进程
4	开发模式	Vue3 热重载 + Electron 主进程自动重启
5	生产打包	npm run build：electron-vite 构建 + electron-builder 打包
6	窗口管理	原生窗口控制、最小化、最大化、关闭
7	系统托盘	最小化到托盘、托盘菜单（可选）
8	IPC 通信	contextBridge 安全双向通信
9	默认页面	页面中心显示"你好，我是考拉搞AI"

项目目录结构（electron-vite 标准）

{{project-name}}/
├── electron.vite.config.ts       # electron-vite 统一配置
├── electron-builder.json5        # 打包配置
├── package.json                  # 依赖 + scripts
├── tsconfig.json                 # 根 TS 配置
├── tsconfig.node.json            # 主进程/预加载 TS 配置
├── tsconfig.web.json             # 渲染进程 TS 配置
├── src/
│   ├── main/                     # Electron 主进程
│   │   └── index.ts              # 主进程入口
│   ├── preload/                  # 预加载脚本
│   │   ├── index.ts              # contextBridge 暴露 API
│   │   └── electron.d.ts         # 类型声明
│   └── renderer/                 # Vue3 渲染进程
│       ├── index.html            # HTML 入口
│       ├── src/
│       │   ├── main.ts           # Vue 入口
│       │   ├── App.vue           # 根组件
│       │   ├── router/           # 路由
│       │   │   └── index.ts
│       │   ├── stores/           # Pinia 状态管理
│       │   │   ├── index.ts
│       │   │   └── modules/
│       │   ├── views/            # 页面
│       │   │   └── HomeView.vue  # 默认页面（"你好，我是考拉搞AI"）
│       │   ├── components/       # 组件
│       │   ├── api/              # 请求层（复用 frontend-request-skill）
│       │   ├── styles/           # 样式（复用 vue-theme-skill Token）
│       │   │   └── tokens.css
│       │   ├── utils/            # 工具函数
│       │   └── types/            # 类型定义
│       └── env.d.ts              # Vite 类型声明
└── resources/                    # 应用资源（图标等）
    └── icon.png