渲染进程介绍
说明
由于 Electron 使用 Chromium 显示网页,那么,Chromium 的多进程架构也被使用。Electron 中的每个网页都在自己的进程中运行,称为渲染器进程 (renderer process)。
在正常的浏览器中,网页通常运行在沙盒封装化的环境中,并且不允许访问本机资源。然而,Electron 用户有权在网页中使用 Node.js 的 API,从而允许较低级别的操作系统交互。
选自 Electron 文档
关于 vue 全家桶
提示
需要强调一点,如非必要(比如组件附加依赖),请不要在 vue 中使用 jq,对于任何非 vue 体系内的的库对 vue 进行更改,vue 都无法检测并且做出对应的响应!(就如同你的房间在被别人整理之后你就找不到你自己放的东西)
我们推崇使用组件的形式来构建您的应用,组件可以使我们的大型并且复杂的应用程序源码更加有组织化,并且每个组件均拥有封装属于自己的 css 和 js,互不干涉。
- 渲染进程目录 components 文件夹中,当然这里只是存放复用次数非常多的的组件,而当每个页面自己的组件时,推荐在该页面中新建一个 components 文件夹,这样便于分开存放和管理。
└─renderer # 渲染进程文件夹
├─api # 请求以及数据库操作文件夹
├─assets # 渲染进程主题 字体等静态资源
├─components # 全局公用组件
├─icons # 项目所有 svg icons
├─layout # 全局 layout
├─router # 路由
├─store # 全局 store管理
├─styles # 全局样式
├─tools # 全局特定工具
├─utils # 全局公共方法
└─views # views 所有页面
└─renderer # 渲染进程文件夹
├─api # 请求以及数据库操作文件夹
├─assets # 渲染进程主题 字体等静态资源
├─components # 全局公用组件
├─icons # 项目所有 svg icons
├─layout # 全局 layout
├─router # 路由
├─store # 全局 store管理
├─styles # 全局样式
├─tools # 全局特定工具
├─utils # 全局公共方法
└─views # views 所有页面
提示
需要注意的是在这里的 assets 和外部的 static 虽然都是存储静态资源但是二者是不一样的,就如同在 vue 脚手架中二者的区别一样。
vue-router
在使用了 vue 之后您应当遵循使用 vue 的路由功能来进行界面切换,再非必要情况下请不要试图使用 a 标签开启新的窗口然后进行其他的页面操作,这是不被推荐的。当然如果您有这些需求也请您使用主进程中的new BorwserWindow
方法进行窗口新建而不是直接使用 a 标签开启新的页面,这样便于您管理您的窗口。
而在 router 文件夹中您可能会发现我并没有将路由表写进 index.js 中,我推荐将路由表分开来进行依次导入,这样就可以避免 index.js 文件非常的臃肿,而在路由表中我写了非常详细的讲解为何我的路由表是如此结构。如果有无法理解的地方还请复习一次vue-router
注意
当使用了 vue-router 之后,请不要将 mode 设置为历史模式! 此模式严格用于通过 http 协议提供文件,并且不能正常使用 file 协议,但是 electron 在产品构建中无法使用此协议提供文件。所以默认的 hash 模式正是我们所需要的。
vuex
Vuex 是一个专为 Vue.js 应用程序开发的 状态管理模式 。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
在该项目中,vuex 均以模块化的形式存储在 store/modules 中而且在该文件夹中,我们使用 index.js 对本文件夹内除它之外的所有 js 以模块的形式加载并挂载,您若要新增模块可以直接新建一个 js 复制 template 中的内容,并修改对外导出名即可。(如果您不知道如何更改,还请您重新复习一次es6)
用到的其他插件
svg-sprite-loader
该 webpack 插件用来挂载 icons 中的 svg 文件夹内的.svg 图标文件,如果想要使用得话,您需要 <svg-icon icon-class="名称"></svg-icon>
该标签就可以使用了,不用担心挂载问题,在 icon/index.js 中,我们已经将其挂载到全局组件中了,您可以在项目任意位置使用到它。
axios(网络请求)
axios,在非 electron 的时候,小伙伴们应该很清楚,这个是基于 promise 的 http 请求,至于为什么将它单独拿出来说是因为,18 版本和 19 版本在 electron 上表现差异非常大。18 版本无论是在普通 web 端还是 electron 端它都不会使用 node 适配器,而在到了 19 就不一样了由于 electron 中自带了 node 环境,则 axios 会优先选择 node 适配器,而在 node 适配器中,form 表单则会表现不太一样,另外再使用 node 适配器之后,所有请求将不会在 electron 的控制台中出现,它们都会直接走 electron 的 net 模块,既然直接走的是 net 模块相比你也已经联想到,它似乎不受 Chromium 的 6 个并发数请求限制了?emm,并没有做测试,但是既然没有从 Chromium 控制台出现的话,那想必也不会占用到图片和字体等这类的请求数,实际上,还是有很多优点的。如果不太喜欢的话可以手动切换 axios 的适配器或者直接回退到 18.1 版本即可。
本项目中我已经封装好了 axios 拦截器以及 baseURL 相关的配置在 utils/request.js 文件中,在 axios 请求接受拦截器中我添加了预处理示例,您可以自行删除那个判断 res.data.code 的判断,这只是个示例而已。 并且在错误回调中我对超时进行了拦截处理。