Electron 入门指北(三)

在之前的两篇文章中了解了Electron的基本概念,但是没有说到具体怎么去写一个 Electron页面,这次记录下The fist electron page 的诞生.

Part 1

ELectron中的每个页面都在自己的的进程中运行,这个进程就是渲染进程.而 ELectron 中的每个网页就是普通前端页面,所以技术上有很多可选项,而我选择的Vue.
Vue 对大部分移动端开发来说可能是仅仅听过,我这个FE菜鸟也没法说出它的优缺点,仅仅是看过 demo 之后爱上了它的写法,而且我司神库 element 也是选vue 的一个小理由.

那, Electron 跟 Vue 怎么一起使用呢?

electron-vue

这个项目是为了简化在electron中使用vue要做的一些手动配置,而且使用了很多vue的脚手架工具来提示开发效率,比如 vue-cli, webpack, vue-router等等. 再提一下, electron-vue的文档非常友好 simulatedgreg.gitbooks.io/electron-vu…,对新手入门真是非常有用.

Part 2

electron-vue 的工程目录:

│
├── README.md                           <=  项目介绍
├── app                                 <=  开发目录
│   ├── dist                            <= 编译打包
│   ├── icons                           <= 相关图标
│   ├── src                             <= 项目源代码
│   │   ├── main                        <= electron主进程
│   │   │   ├── application.js
│   │   │   ├── index.dev.js
│   │   │   ├── index.js
│   │   ├── renderer                    <= electron渲染进程
│   │   │   ├── App.vue                 <=  Vue 根组件
│   │   │   ├── main.js                 <=  Vue 入口
│   │   │   ├── assets                  <=  静态资源
│   │   │   ├── common                  <=  公共配置
│   │   │   ├── config                  <=  项目配置
│   │   │   ├── extend                  <=  Vue 扩展相关
│   │   │   ├── router                  <=  Vue 路由相关
│   │   │   ├── store                   <=  Vuex
│   │   │   ├── views                   <=  视图层
│   ├── index.ejs                       <= 模板文件
│   ├── package.json                    <=  相关依赖
├── build                               <=  打包桌面应用相关
│   ├── Gruntfile.js                    <=  构建脚本
│   ├── package.json                    <=  相关依赖
├── tasks                               <=  electron-packeger打包
│   ├── release.js
│   ├── runner.js
├── test                                <=  测试文件夹  
│   ├── e2e
│   ├── unit
│   ├── .eslintrc
├── config.js                           <=  electron打包配置
├── webpack.main.config.js
├── webpack.renderer.config.js
├── package.js
│
复制代码

在开发中,如何使用vue 来构造一个页面并不在入门范围内,这个属于前端基础范围.

Part 3

// To do: 项目打包...

参考文章

aotu.io/notes/2016/… segmentfault.com/a/119000001…