上一个篇章中讲了如何搭建一个 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 install

4. 革新 webpack 配置文件

因为咱们批改了目录构造所以 webpack 配置文件也须要批改。

入口文件加一级renderer

5. 产出 renderer 文件

npm run build-prod

6. 批改 main 线程对 renderer 线程的援用

7. 革新 electron 的入口文件

• 当然这里咱们能够应用 es6 来开发 main.js 文件，而后应用 node-loader 来产出 main.js 到 output 来晋升开发体验

8. 功败垂成

启动咱们的我的项目！

npm run start

总结：通过 7 步咱们就能够把现有的 Vue 我的项目革新成为 electron 我的项目，其实能够看出老本并不高。