听说你想学Electron跨平台App开发？别急，跟着Node官网的教程来。首先得把Node安上，这里推荐你装稳定版，这样做起项目来就舒服多了。安装方法也不难，用Homebrew就能解决。另外，你可以试试切换到淘宝的npm仓库镜像，这样下载东西快还稳当！还有，别忘了时常查看下电脑里的vue-cli版本是不是最新的，不然可能会有些小问题出现哈。
npm config set registry http://registry.npm.taobao.org/或者npm install -g cnpm --registry=https://registry.npm.taobao.org
克隆Electron官方项目
vue -V
npm install @vue/cli -g
跟着官方指南操作，我就把入门实例搞定。这个东西像小教程一样，把Electron怎么用一讲到底，方便又快。准备好素材后，试了试运行npmrundev和npmrunbuild两个命令，发现electron-vue模板应用跑起来和打包都没问题！
npm install -g electron或者cnpm install -g electron
electron --version
深入理解Chromium的多进程架构
想学Electron？得注意它跟Chromium关系密切呐！而说起Chromium，那可是Electron的立足之本。有个叫“多进程”的特性，千万要当回事儿！每次打开新页面，都会有专属的渲染进程跑起来，互不干涉，这样用起App来就顺溜多了，安全性当然也是杠杠滴。再说到跟其他浏览器比，Electron还有个优势就是能用上Node.js的API，让你在电脑上操作起来更流畅，开发起来也省心不少呢～
git clone https://github.com/electron/electron-quick-start
cd electron-quick-startnpm installnpm start
探索Electron项目目录结构
朋友，电离物（Electron）其实和咱们普通前端开发挺像滴，就是有个大管家叫做主进程，负责展示网页和渲染进程。还有一个用于进程间沟通的通信机制，这个你应该懂。再说渲染进程，这就是真正干活儿的地方，主要处理网站上的各种事情。看看render部分，里面东西多得很，比如assets、components、router、store，还有App.vue和main.js，这些都是项目的核心部分！
vue init simulatedgreg/electron-vue
主进程与渲染进程的交互
简单来说就是，Electron做出来的应用跟我们平常用的浏览器差不多，也能上网看各种网站，还不影响彼此，方便得很。不过别以为它只是个浏览器，Electron还有本事搞定页面渲染器，Node.jsAPI和电脑系统也能随意操控。这样一来，Electronapp就能搞出好多好玩又实用的功能了！
项目开发结构与模块化
看看那个代码库里的文件夹，有Assets、Components、Router、Store等等，看起来整齐有序。还有那个App.vue和Main.js文件，也挺有意思。记得咱们的文件就丢在Assets文件夹里面，然后它就会自动跑到Dist那边去，超轻松。再说electron-vue，用vuex模块来存储数据，就在src/renderer/store/modules那里喔，感觉真的非常模块化！
Electron├──atom - Electron 的源代码| ├── app - 系统入口代码| ├── browser - 包含了主窗口、UI 和其他所有与主进程有关的东西，它会告诉渲染进程如何管理页面| | ├── lib - 主进程初始化代码中 JavaScript 部分的代码| | ├── ui - 不同平台上 UI 部分的实现| | | ├── cocoa - Cocoa 部分的源代码| | | ├── gtk - GTK+ 部分的源代码| | | └── win - Windows GUI 部分的源代码| | ├── default_app - 在没有指定 app 的情况下 Electron 启动时默认显示的页面| | ├── api - 主进程 API 的实现| | | └── lib - API 实现中 Javascript 部分的代码| | ├── net - 网络相关的代码| | ├── mac - 与 Mac 有关的 Objective-C 代码| | └── resources - 图标，平台相关的文件等| ├── renderer - 运行在渲染进程中的代码| | ├── lib - 渲染进程初始化代码中 JavaScript 部分的代码| | └── api - 渲染进程 API 的实现| | └── lib - API 实现中 Javascript 部分的代码| └── common - 同时被主进程和渲染进程用到的代码，包括了一些用来将 node 的事件循环| | 整合到 Chromium 的事件循环中时用到的工具函数和代码| ├── lib - 同时被主进程和渲染进程使用到的 Javascript 初始化代码| └── api - 同时被主进程和渲染进程使用到的 API 的实现以及 Electron 内置模块的基础设施| └── lib - API 实现中 Javascript 部分的代码├── chromium_src - 从 Chromium 项目中拷贝来的代码├── docs - 英语版本的文档├── docs-translations - 各种语言版本的文档翻译├── spec - 自动化测试├── atom.gyp - Electron 的构建规则└── common.gypi - 为诸如 `node` 和 `breakpad` 等其他组件准备的编译设置和构建规则
安装必要的工具和依赖
首先，你要用NPM、Vue和Electron这些个好东西来搭个ElectronAPP。这样你的APP就能飞起来，而且不容易崩溃。而且用它们，你也能搞出个属于自己的开发环境，以后做项目就省心多了。
评论0