这是我参与8月更文挑战的第3天，活动详情查看：8月更文挑战
首先，我们先来看下electron中的生命周期，这里我从知乎上找到了一篇讲的很好的文章。
使用electron-vue创建electron(中文文档)项目
electron-vue 是一个结合 vue-cli 与 electron 的项目，主要避免了使用 vue 手动建立起 electron 应用程序的繁琐。(vue-loader 的 webpack、electron-packager、electron-builder、vue-router、vuex等组件不用再手动引入到项目中。)
-
全局安装vue-cli
npm install @vue/cli -g -
使用vue-cli脚手架工具来创建项目
vue init simulatedgreg/electron-vue project_name -
安装依赖
npm install -
运行模板程序
npm run dev或npm run build
electron-vue项目 目录结构
my-project
├─ .electron-vue（webpack配置文件）
│ └─ build.js（生产环境构建代码）
│ └─ dev-client.js（热加载相关）
│ └─ dev-runner.js（开发环境启动入口）
│ └─ webpack.main.config.js（主进程配置文件）
│ └─ webpack.renderer.config.js（渲染进程配置文件）
│ └─ webpack.web.config.js
├─ build（是文件打包使用的）
│ └─ win-unpacked/
│ │ ├─ locales（地区语言资源包）
│ │ ├─ resources（地区语言资源包）
│ │ ├─ *.dll（动态链接库）
├─ dist(打包后的文件资源)
│ ├─ electron/
├─ node_modules/（依赖目录）
├─ src（源码）
│ ├─ main(主进程)
│ │ ├─ index.dev.js（捆绑index.js-此文件专门用于开发阶段，因为它会安装 electron-debug 和 vue-devtools）
│ │ └─ index.js(主进程的进程JS)
│ ├─ renderer（渲染进程）
│ │ ├─ assets/（放置静态资源，如图片，视频，静态配置）
│ │ ├─ components/（放置vue组件）
│ │ ├─ router/（放置页面路由）
│ │ ├─ store/（放置公共模块，如vuex）
│ │ ├─ App.vue
│ │ └─ main.js
│ └─ index.ejs
├─ static/（静态文件）
#全局配置文件
├─ .babelrc
├─ .eslintignore
├─ .eslintrc.js
├─ .gitignore
├─ package.json
└─ README.md
关于 main 进程
在实际开发过程中，存在这样的一个文件 src/main/index.dev.js。该文件专门用于开发以及安装开发工具。原则上，该文件不用修改，但是可以被用来扩展你的开发需求。在构建的过程中，webpack 将介入其中并创建一个的捆绑，以 src/main/index.js 作为该捆绑的入口文件。
主进程
在 Electron 中，运行 package.json 主脚本的过程称为主进程 (main process)。在主进程中运行的脚本可以通过创建网页来显示其图形化界面。
摘自 Electron 文档
由于 main 进程本质上是一个完整的 node 环境，所以除了以下两个文件之外，并没有什么初始的项目结构。
src/main/index.js
这个文件是你应用程序的主文件，electron 也从这里启动。它也被用作 webpack 产品构建的入口文件。所有的 main 进程工作都应该从这里开始。
app/src/main/index.dev.js
这个文件专门用于开发阶段，因为它会安装 electron-debug 和 vue-devtools。一般不需要修改此文件，但它可以用于扩展你开发的需求。
