项目结构

参考开发文档

electron

vue-cli-plugin-electron-builder

vuetify

架构说明

electron 由 Node.js+Chromium+Native APIs 构成。你可以理解成,它是一个得到了 Node.js 和基于不同平台的 Native APIs 加强的 Chromium 浏览器,可以用来开发跨平台的桌面级应用

它的开发主要涉及到两个进程的协作——Main(主)进程和 Renderer(渲染)进程

主进程为 Node.js 服务端环境,主要实现一些系统以及底层的操作,比如创建系统级别的菜单,操作剪贴板,创建 APP 的窗口等

渲染进程为基于 Vue.js 的 HTML 环境

主进程会将渲染进程的 html,创建 window,挂载 html 运行

主进程与渲染进程通过 electron 包提供的 ipcMain 和 ipcRenderer 进行进程通讯。

开发方向:简单-学习测试,很难-ps、vscode 方向?

主进程

  1. electron + electron-builder:桌面端封装工具

渲染进程

  1. vue.js + vue-router + vuex + vue-cli-electron-builder-plugin 架构
  2. vuetify + element-ui: 前端组件库

文件目录结构

- build 打包 icon

- public 包含渲染进程 favcon.ico,index.html 等静态文件

- src

  --- assets 渲染进程静态文件夹

  --- components Vue.js 组件

  --- plugins Vue.js 插件

  --- router Vue-router

  --- store Vuex

  --- views Vue.js 主视图

  --- background.js 主进程入口

  --- main.js 渲染进程入口

- vue.config.js vue-cli3的配置文件

上次更新: 12/13/2019, 11:49:51 AM