介绍

vue介绍 - 图2 element-ui介绍 - 图4 electron介绍 - 图6 license介绍 - 图8

起手该项目的缘由是因为原项目介绍 - 图9已经停止维护了很久，electron的版本号还停滞在1.x版本，所以就在原项目的基础上更新了所有依赖，并且融入了花裤衩大大的vue-admin介绍 - 图10的核心代码以及融入了我自己的一些代码。同时如果您打算使用这些核心代码的话，还请希望结合该教程。内置了nedb，两种electron自动更新，自定义头部等大家几乎经常用到的功能；相信在基础需求面前，本项目能够最大程度的帮助你

提示

本文档对应GitHub中的第二个分支，master将会再不久迁移同第二个分支。 阅读本文档即默认您拥有前端以及vue基础知识，并拥有部分node基础知识。

功能

  1. - 登录（假）
  3. - 使用electron-updater进行更新检查
  5. - 使用electron的webContents类进行下载
  7. - 全局快捷键注册以及监听
  9. - 继承vue-admin基础版功能
  11. - 内置express服务端

前序准备

你需要在本地安装node介绍 - 图11和git介绍 - 图12。本项目技术栈基于es6介绍 - 图13、electron介绍 - 图14、vue介绍 - 图15、vuex介绍 - 图16、vue-router介绍 - 图17、axios介绍 - 图18以及element-ui介绍 - 图19，提前了解和学习这些知识会对使用本项目有很大的帮助。

目录结构

  1. ├── .electron-vue              # 构建相关
  2. ├── build                      # 项目打包目录
  3. │   │── icon                   # 图标
  4. │   └── lib                    # 打包依赖（win）
  5. ├── config                     # 构建相关
  6. ├── dist                       # webpack临时工作目录
  7. ├─src                          # 源码目录
  8. │  ├─main                      # 主进程目录
  9. │  │  ├─config                 # 主进程配置文件夹
  10. │  │  │    ├─DisableButton.js  # 配置全局快捷键禁用
  11. │  │  │    ├─StaticPath.js     # 静态路径文件
  12. │  │  │    └─menu.js           # 主进程的自定义菜单
  13. │  │  ├─server                 # 内置服务端文件夹
  14. │  │  │    ├─index.js          # 内置服务端启动
  15. │  │  │    └─server.js         # 内置服务端主体
  16. │  │  ├─services               # 主进程服务文件夹
  17. │  │  │    ├─checkupdate.js    # electron-updater更新
  18. │  │  │    ├─downloadFile.js   # webContents类更新
  19. │  │  │    ├─ipcMain.js        # ipcMain通讯
  20. │  │  │    └─windowManager.js  # 初始出所有窗口
  21. │  │  └─index.js               # 主进程入口
  22. │  └─renderer                  # 渲染进程文件夹
  23. │      ├─api                   # 请求以及数据库操作文件夹
  24. │      ├─assets                # 渲染进程主题 字体等静态资源
  25. │      ├─components            # 全局公用组件
  26. │      ├─icons                 # 项目所有 svg icons
  27. │      ├─layout                # 全局 layout
  28. │      ├─router                # 路由
  29. │      ├─store                 # 全局 store管理
  30. │      ├─styles                # 全局样式
  31. │      ├─tools                 # 全局特定工具
  32. │      ├─utils                 # 全局公共方法
  33. │      └─views                 # views 所有页面
  34. ├─static                       # 全局静态资源
  35. ├── tests                      # 测试
  36. ├── .env.xxx                   # 环境变量配置
  37. ├── .eslintrc.js               # eslint 配置项
  38. ├── .babelrc                   # babel-loader 配置
  39. ├── .travis.yml                # 自动化CI配置
  40. ├── vue.config.js              # vue-cli 配置
  41. ├── postcss.config.js          # postcss 配置
  42. └── package.json               # package.json

安装

注意

请不要自作主张在安装依赖的时候添加-g参数！除非您很清楚您正在做什么！

  1. # clone项目
  2. git clone https://github.com/umbrella22/electron-vue-template.git
  3. # 进入项目目录
  4. cd electron-vue-template
  5. # 安装依赖
  6. # 如果网络非常顺畅的情况下
  7. npm install
  8. # 如果网络出现一定的情况
  9. # 建议不要使用cnpm，会出现各种玄学bug。您可以通过如下操作加快安装速度
  10. npm install --registry=https://registry.npm.taobao.org
  11. # 但是需要注意的是electron的本体下载并不是走这里所以还是要去设置一下
  12. npm config edit
  13. # 该命令会打开npm的配置文件，请在registry=https://registry.npm.taobao.org/下一行添加
  14. # electron_mirror=https://cdn.npm.taobao.org/dist/electron/ 
  15. # ELECTRON_BUILDER_BINARIES_MIRROR=http://npm.taobao.org/mirrors/electron-builder-binaries
  16. # 然后关闭该窗口，重启命令行，删除node_modules文件夹，并重新安装依赖即可
  17. # 本地开发 启动项目
  18. npm run dev 或 yarn dev

注意

强烈建议不要直接使用cnpm进行安装，那种玄学bug是真的没法说，最好就是用nrm切换一下registry，或者使用yarn，是最好的了。

一般遇到Electron failed to install correctly，please delete node_moules/electron and try installing again这种错误时，就是electron本体没有下载成功，删除node_module文件夹，并按照上面的设置进行electron镜像地址设置之后就好了

注意

这里的环境指的是windows下，如果您是MacOS或者是linux的话，您可能需要熟悉vim的操作。

在启动完成之后，就会自动打开程序界面了；接下来你就可以针对你自己的需求进行代码的修改和业务开发

全局文件夹

在本项目中内置了两个全局文件夹：

  • __static：在被打包成asar之后，依旧能够提供虚拟路径，一般满足静态文件访问。
  • __lib：无论是否启用asar，均提供一个实体的绝对路径，可在config文件夹中设置，详情请查看调用dll章节。

Vue 生态圈

首先了解这些 vue 生态圈的东西，会对你上手本项目有很大的帮助。

  1. Vue Router介绍 - 图20 是 vue 官方的路由。它能快速的帮助你构建一个单页面或者多页面的项目。

  2. Vuex介绍 - 图21 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。它能解决你很多全局状态或者组件之间通信的问题。

  3. Vue Loader介绍 - 图22 是为 vue 文件定制的一个 webpack 的 loader，它允许你以一种名为单文件组件 (SFCs)的格式撰写 Vue 组件。它能在开发过程中使用热重载来保持状态，为每个组件模拟出 scoped CSS 等等功能。不过大部分情况下你不需要对它直接进行配置，脚手架都帮你封装好了。

  1. Vue Test Utils介绍 - 图23 是官方提供的一个单元测试工具。它能让你更方便的写单元测试。

  2. Vue Dev-Tools介绍 - 图24 Vue 在浏览器下的调试工具。写 vue 必备的一个浏览器插件，能大大的提高你调试的效率。

  3. Vetur介绍 - 图25 是 VS Code 的插件. 如果你使用 VS Code 来写 vue 的话，这个插件是必不可少的。