electron + vue2 测试demo

转载请标明出处。

前言

(4月15日) “把这个c点端的给我改吧改吧，明天上线”。这就是第一天，刚入职，转天晚上开了个会，嘚嘚嘚一会 我就听见一句，我们接下来要做一个叫做客户端的（内部企微），就是类似飞书这种b端管理的工具。由xx和xx和麻雀来做， 我本来打算用点新鲜玩意来做，但是被拒绝了，虽然说是嵌套的 都是第一次接触electron这玩意儿，也没啥太大的把握 也承担不起该责任。 所以就随便搞一个测试用例，然后好多伙伴可能也需要这样的一个参考， 虽然不是很厉害的架子，但是足够承载起那基本的诉求了。 由于此版本搭建时间至此过长，我中间也没再做过多的补充， 目前可能也有应用的极限性，如需要沟通请联系(lianglei_cool@163.com)

导读

 我们需要知道electron的基本工作原理，然后才知道从何下手， 而不是天天查查查查， 百度，谷歌 知不知道这种索取的知识和内部认知突破完全不同，别入下游， 力争上游(the paper chase 这也是一部电影，不妨看看 )。 electron分为两个进程 一个承载着页面进程，一个承载着服务进程， 简称 渲染进程和主进程（主要负责桌面应用的）， 我们要做的就是把渲染进程替换为我们的页面，主进程中在启用另一个进程来承载node（子进程），整体就这么简单 你理清思路后 清晰明了的当一个体力活。 这个项目的代码就做个两件事情，

• 更替渲染进程和添加子进程
• 打包（应该有点问题 好像是路径的问题，先留个悬念偶吼吼）

介绍 (项目地址)

 此项目提供给要开发桌面程序的一个迷你程序组建，算是一个测试用例吧。

 基于vue3.0cli electron12.x node做的测试 单位 。

 也只是作为简单测试和学习的同学来用， 有需要自取。

 这个项目很适合自己做点小应用， 后续我会发出来我自己做的项目。

工程

|-- vue2-electron12
    |-- .child_env
    |-- .env
    |-- .gitignore
    |-- babel.config.js
    |-- favicon.ico
    |-- package.json
    |-- README.md
    |-- vue.config.js
    |-- yarn.lock
    |-- public
    |   |-- favicon.ico
    |   |-- index.html
    |-- server /* node 微服务 */
    |   |-- .gitignore
    |   |-- app.js  // 主入口
    |   |-- package.json
    |   |-- yarn.lock
    |   |-- utils
    |-- src // web 和 electron工程目录
        |-- background.js // electron跟文件
        |-- node_child_process.js // 子进程node微服务
        |-- util.js
        |-- main // electron 文件 需要vue.config.js中配置实时更新 （打包无需配置）
        |   |-- index.js
        |-- preload // electron和web连接层
        |   |-- index.js
        |-- rerender // web前端渲染进程(Vue)
            |-- App.vue
            |-- main.js
            |-- assets
            |   |-- logo.png
            |-- components
                |-- HelloWorld.vue

 为什么需要node？ 奇怪吗 不奇怪 我们都听过“中台”这个概念吧 可大可小，咱们也都知道一个叫做“微信”的聊天工具吧， 那就应该还知道一个事情，就是在没有网络的时候，你还是依旧如新， 可以查看任何的聊天记录，那这个数据肯定不是离线请求的 当然是现如今。 这是一个很好的例子，不做过多阐述。根据一个理工男 简单的理解为中间层就好了， 但如果从技术角度去追溯根源的话可能要涉及到的更多的数据速度和分析来思考。什么是数据中台

下面是当时开发时记录的， 一起来欣赏欣赏

• 整体

  1. node如何与electron合并开发? node服务是通过electron的子进程方式来启动， 而不是单独应用，当然在当前目录结构中，node可以单独抽离开来，node主要在electron的主进程中建立子进程。作为单独服务来启用，但由于是本地服务，上线就需要和electron柔和到一起，再通过electron启动本地子进程的当时来工作(主要在src/node_child_process.js中配置)。上述是node如何启动微服务的介绍； （本地采用nodeman开发）
  2. 前端如何与electron合并开发? 因为electron采用两个进程:1. 主进程使用桌面任务;2.渲染进程适用浏览器绘画使用；这里通过渲染进程来完成vue的开发，由于渲染进程是网页，内核是chrome的，所以说可以访问静态资源和本地前端服务，通过以上两种方式完成开发环境和生产环境的运作！
  3. 打包问题
     • vue打包 在这个版本内，vue的打包肯定是依赖vuecli中的webpack来文件打包，
     • node打包 目前只做了整体文件复制，在安装包的时候把本地服务都克隆到了安装包所需文件目录下
     • electron主进程文件打包 在vue2里面采用的是插件 vue-cli-plugin-electron-builder 整体都做了时时编译、打包主进程文件
     • app安装包 采用vue-cli-plugin-electron-builder

• 遇到的问题?

  • 在接到整个项目的时候无从下手，缺少独立思考的能力 刚接手时候首先考虑的就是有没有相应的cli架子，结果找了一下发现了electron-vue这个架子，下载好后发现没有那么理想，也没有仔细阅读electron官方文档，一头懵逼的找着网络资源
  • 完全采用无脑开发，没考虑过要做什么，更别说怎么做
  • node怎么与electron相结合？ 采用什么方式，要掌握什么知识

• 完全陌生何从下手？

  1. 知道要做什么，然后寻找怎么做的方法！！！
  2. 如果有？就查看相应的官方文档，检索重要信息来记录，这一步骤一定要学会分析 如果没有？去百度、谷歌 看广大网友博客 --- 检索收集重要信息
  3. 搭建整体接架构思维，多方面入手，按照结果和目的涉及

总结

因为无知所以无畏，经历总是表现得非常精彩，到现在 做到的成就 反而回忆变成了兴奋地事情。

爷 您看完了就去给我的项目点个star行吗项目地址