上一个篇章中讲了如何搭建一个electron我的项目，能够看到尽管咱们胜利的搭建了一个electron我的项目，然而离一个产品还很远。在这一篇章中咱们将联合已有的vue我的项目来实现一个实在的electron商业利用。
electron + Vue + Vuex + VueRouter
已有的Vue我的项目目录如下，做过Vue我的项目的同学们必定都曾经很相熟了。
留神！咱们都是在electron我的项目中操作的！
1.合并package.json
次要是求并集，然而要留神的是须要用electron我的项目为原则来笼罩现有的vue我的项目，留神main节点十分重要。那么我开了两个VSC窗口来便于操作。
这个过程简略轻松。
2.革新我的项目构造
咱们晓得electron 分为 main和renderer两个线程，咱们在src中创立两个目录来寄存他们。
src
｜——main
｜——renderer
- 原来的src/inder.js 拖入到main目录
- vue我的项目中的src全副拖入renderer目录
- 删除原来src中的index.html和index.css
- 把vue我的项目中的assets、build、scripts拖入electron我的项目的根目录中
- 把vue我的项目中的.babelrc、.npmrc、 .editorconfig拖入electron我的项目的根目录中
至此两个我的项目的源文件整合实现
3.装置依赖库
咱们只是把vue中的依赖写入了package.json 还没有装置，我的项目是无奈运行的。
yarn install4.革新webpack配置文件
因为咱们批改了目录构造所以webpack配置文件也须要批改。
入口文件加一级renderer
5.产出renderer文件
npm run build-prod6.批改main线程对renderer线程的援用
7.革新electron的入口文件
- 当然这里咱们能够应用es6来开发main.js文件，而后应用node-loader来产出main.js到output来晋升开发体验
8.功败垂成
启动咱们的我的项目！
npm run start总结：通过7步咱们就能够把现有的Vue我的项目革新成为electron我的项目，其实能够看出老本并不高。