- 项目整体划分：项目整体划分为 3 个部分，分别为main、preload、renderer，三个部分分别为：
- main: 主进程相关内容
- preload: 由于本程序的主要界面是直接基于的网页版做的，所以在网页版页面做成的主窗口界面的功能都是通过动态注入js实现，所以这一部分都被归类为preload，其中涉及了两个窗口，程序主窗口和子窗口
- renderer: 该部分的页面是本来没有，在由网页版改为桌面版的过程中，为了满足部分功能需要，而添加的窗口，包含关于、系统设置等
- 项目窗口：项目中窗口主要包含聊天主窗口(mainWin)、设置(settingWin)、关于(aboutWin)和网络错误窗口(errorWin)，其中 mainWin 的渲染进程代码位于preload文件夹下，且是采用原生 js 编写，其余几个窗口都位于renderer文件夹下，都是采用 vue 编写
- 文件夹说明：
- build文件夹：该文件夹主要是 webpack 打包相关的配置文件，子目录分别对应项目整体划分的 3 各部分
- icon文件夹：该文件夹是存放图标文件的，除了会在项目源码中引用，还会在编译为各个平台安装包的时候作为程序 icon
- screenshot文件夹：该文件夹是用来存放程序截图的文件夹，开发中几乎不会使用到
- src文件夹：该文件夹为项目的源码文件，包含了主进程和渲染进程的全部代码
- 编译打包：编译打包使用了electron-builder这个模块，用了这个模块之后可以配合electron-updater提供自动升级功能。
- 在主进程(main)和 preload 中，为了减小单个文件的大小，并且合理管理代码，所有的功能模块都是通过高阶函数的方式加载进来的，使用高阶函数的目的是为了让我们在所有的模块代码中都可以访问到 ttkclient 对象
- 主进程的入口文件在调试环境时使用index.dev.js，正式环境使用index.js
- rendder 部分和普通 vue 项目一样，具体请参考 vue 官方提出的编码风格指南
- 在所有的进程中，如果需要访问图片资源或者其他资源，请通过
path.join(app.getAppPath(), './icon/32x32.png')的方式来获取，因为打包之后相对的目录结构不能保证一致，所以请务必注意 - 编码时请使用 ES6 语法，并遵守 ESLint 的规则
- 进入项目根目录下
- 修改
build/main/webpack.dev.conf.js，注释掉ElectronDevWebpackPlugin插件，修改devtool以申城 sourcemap 方便调试 - 运行
npm run dev，服务都启动后，在dist文件夹下找到main.js，在文件中随意打一个断点，然后在vscode启动调试，就可以在源码中打断点了。注意：一定先要在dist/main.js中打一个端点，否则vscode不能捕获在源码中的断点