从0到1开发一款Vue3+Electron桌面应用
|
你是否曾被奇怪的梦境困扰？ 梦见掉牙、被追赶、飞翔……这些梦境到底在暗示什么？ 今天给大家分享一款开源解梦神器——从架构设计到功能实现完整解析！ |
一、项目概述
解梦大师是一款基于 Vue 3 + Electron 开发的桌面应用，融合了西方心理学与中国传统解梦智慧。项目采用前后端分离架构，支持三种经典解梦流派，提供完整的梦境记录、分析、可视化功能。
1.1 三大解梦流派
|
解梦流派 |
理论基础 |
核心特点 |
|
�� 弗洛伊德派 |
潜意识理论、性本能、童年创伤 |
分析潜意识欲望、压抑情感、童年经历对梦境的影响 |
|
��️ 荣格派 |
集体无意识、原型理论、自性化 |
识别梦境中的原型象征（如智慧老人、阴影、阿尼玛） |
|
�� 玄学派 |
周公解梦、阴阳五行、风水命理 |
基于传统解梦典籍，提供吉凶判断和运势分析 |
1.2 完整功能清单
- 智能解梦：支持长梦境智能分段，逐段深入分析，AI 对话追问
- 梦境日记：完整的 CRUD 操作，支持日期选择和搜索筛选
- 情绪追踪：记录梦境情绪状态，生成情绪变化趋势图
- 词云分析：提取梦境关键词，生成可视化词云图
- 趋势分析：统计梦境时间分布、情绪分布、关键词频率
- 梦境配图：AI 根据梦境描述生成配图
- 梦境词典：78+ 常见梦境符号解析数据库
- 批量导出：一键导出 PDF 梦境日记，支持自定义日期范围
- API 配置：支持 DeepSeek、豆包等多种 AI 模型
二、技术架构
2.1 技术栈选型
|
层级 |
技术 |
选型理由 |
|
前端框架 |
Vue 3 + Composition API |
更好的逻辑复用、TypeScript 支持、性能优化 |
|
桌面框架 |
Electron |
跨平台、成熟生态、丰富的原生 API |
|
状态管理 |
Pinia |
Vue 官方推荐、TypeScript 友好、简洁 API |
|
构建工具 |
Vite |
极速冷启动、热更新、现代化构建 |
|
UI 样式 |
Tailwind CSS |
原子化 CSS、高度可定制、开发效率高 |
|
图表库 |
Chart.js |
轻量级、响应式、丰富的图表类型 |
|
PDF 导出 |
jsPDF + html2canvas |
前端生成 PDF、支持中文、样式保留 |
2.2 项目架构设计
项目采用经典的前后端分离架构，Electron 作为桌面容器，Vue 3 构建用户界面。
目录结构：
|
源码/ ├── electron/ # Electron 主进程 │ ├── main.js # 主进程入口 │ └── preload.js # 预加载脚本 ├── public/ # 静态资源 ├── src/ │ ├── assets/ # 样式文件 │ ├── components/ # 公共组件 │ ├── data/ # 静态数据（梦境词典等） │ ├── stores/ # Pinia 状态管理 │ ├── utils/ # 工具函数 │ ├── views/ # 页面组件 │ ├── App.vue # 根组件 │ ├── main.js # 应用入口 │ └── router.js # 路由配置 ├── index.html ├── package.json └── vite.config.js # Vite 配置 |
核心模块说明：
- stores/app.js: Pinia Store，管理全局状态（梦境历史、设置、统计数据）
- utils/api.js: AI API 封装，支持多模型切换、错误处理、重试机制
- utils/archetypes.js: 荣格原型检测算法，基于关键词匹配和置信度计算
- utils/pdfExport.js: PDF 导出功能，使用 jsPDF 和 html2canvas 实现
- utils/trendAnalysis.js: 趋势分析算法，统计梦境时间分布、情绪分布
- utils/wordCloud.js: 词云生成，基于梦境文本分词和频率统计
三、开发流程
3.1 环境搭建
前置要求：Node.js 18+、npm 或 yarn
|
# 1. 克隆项目 git clone https://github.com/guyue581/dream-master.git cd dream-master # 2. 安装依赖 npm install # 3. 开发模式运行 npm run electron:dev # 4. 构建生产版本 npm run electron:build |
3.2 开发阶段
第一阶段：基础架构（1-2周）
- 搭建 Vue 3 + Vite 项目骨架
- 集成 Electron，配置主进程和渲染进程通信
- 配置 Tailwind CSS，设计整体 UI 风格
- 搭建 Pinia Store，设计状态管理结构
第二阶段：核心功能（2-3周）
- 实现三种解梦模式的 AI 调用接口
- 开发梦境输入界面，支持快捷标签和情绪选择
- 实现梦境日记的增删改查功能
- 开发历史记录页面，支持搜索和筛选
第三阶段：数据可视化（1-2周）
- 集成 Chart.js，开发情绪追踪图表
- 实现词云生成功能
- 开发趋势分析页面，统计梦境规律
第四阶段：增强功能（1周）
- 实现 PDF 导出功能
- 开发梦境配图生成功能
- 完善设置页面，支持多模型配置
四、使用流程
4.1 首次使用配置
4.2 解梦流程
4.3 数据管理
梦境日记：
- 查看所有历史解梦记录
- 支持按关键词搜索
- 可编辑或删除历史记录
情绪追踪：
- 查看梦境情绪分布饼图
- 追踪情绪变化趋势
批量导出：
- 选择导出时间范围
- 一键生成 PDF 梦境日记
五、核心代码解析
5.1 AI 解梦接口封装
支持多模型切换，统一错误处理：
|
// utils/api.js – 核心解梦接口 export async function interpretDream(dream, mode, apiSettings, followUp = null) { const { provider, apiKey, model } = apiSettings;
// 根据模式构建不同的 system prompt const systemPrompt = buildSystemPrompt(mode);
// 调用 AI API const response = await callAIAPI({ provider, apiKey, model, messages: [ { role: 'system', content: systemPrompt }, { role: 'user', content: dream } ] });
return response.choices[0].message.content; } |
5.2 智能分段算法
长梦境自动分段，逐段分析：
|
// 智能分段逻辑 function smartSegment(text) { if (text.length <= 500) return [text];
// 优先按段落分割 const paragraphs = text.split(/\\n+/); if (paragraphs.length > 1) { return paragraphs.filter(p => p.length > 50); }
// 按句子分割，每段约400字 const sentences = text.split(/[。！？]+/); // … 合并逻辑 } |
六、GitHub 仓库
项目已开源，欢迎 Star 和 Fork！
|
⭐ 解梦大师 Dream Master https://github.com/guyue581/dream-master 下载安装包 | 查看源码 | 提交 Issue | 贡献代码 |
结语
解梦大师不仅是一款解梦工具，更是一扇通往自我认知的窗口。通过记录和分析梦境，我们可以更好地了解自己的潜意识，发现内心深处的渴望与恐惧。
从技术角度看，本项目展示了 Vue 3 + Electron 开发桌面应用的完整流程，包括状态管理、数据可视化、文件导出等常见需求的实现方案。希望这篇文章对你有所帮助！
|
穿越潜意识的迷雾，揭示命运的启示 |
