electron-vue-template

The boilerplate for making electron applications built with vue-cli3 scaffolding。

一个electron模板，使用了vue-cli3脚手架搭建。

---

Install

# Clone the repository
git clone https://github.com/lichao-eric/electron-vue-template.git

# Go into the repository
cd electron-vue-template

# Install dependencies
npm install

# Run the app
npm run dev

# Pack the app, windows-msi, mac-dmg
npm run pack

---

Develop

electron

electron fold：

|-- electron
  |-- const
    |-- config                              # electron mainwindow configs
  |-- bin
  |-- core
    |-- ipc.js                            # window控制ipc
    |-- logs.js                           # 日志设置
    |-- update.js                         # 更新
  |-- helper
    |-- window.js                         # window窗口工具方法
  |-- icon
      |-- electron-vue-template.png           # app icon, config package.json
  |-- app.js                             # main window
  ...

electron目录(暂定为electron的开发目录),electron的官方文档

vue

Same as Vue development mode

---

Pack Config 打包构建配置

  "build": {
    "productName": "electron-vue-template",
    "appId": "com.electron.vue.template.app",
    "mac": {
      "target": "dmg",
      "icon": "electron/icon/electron-vue-template.png"
    },
    "win": {
      "target": "msi",
      "icon": "electron/icon/electron-vue-template.png"
    }
  }

productName: app name 应用名称

icon: app icon 应用icon

more information electron-builder

更多打包配置项，可以查看electron-builder文档

---

补充说明

1. 迁移已有的vue项目到该项目，打包后页面一直空白，可能是什么导致的？

可以本地直接打开，如果资源加载不报错，可以看一下路由是不是使用了history, 如果是，可以改成hash试一下

2. 该工程的流程描述

开发模式

主要点就是webpack启动的vue工程与electron的结合

简单来说就是webpack启动vue工程 -> 在devServer的钩子中启动electron，热更新代码

构建过程

electron打入静态页面及资源文件

webpack打包生成静态资源目录webroot -> electron打包引用webroot目录，生成dmg/msi安装包

3. 改了electron/*目录文件不生效?

暂未支持该目录热更新，可以通过watch该目录，重新启动electron来实现

4. vue工程启动端口设定

在package.json中有development模块，可以看到port，配置一下重启即可。

5. 怎么制定打包后的安装包文件名

现安装包的文件命名规则为： package.json中productName+versions版本号

6. 如何配置打包后的文件类型

工程打包使用的是electron-builder,默认配置msi,dmg。

如果需要配置linux平台与安装包可以查看electron-builder文档

---

Dependencies 部分依赖

在vue-cli3脚手架基础上，与electron-quick-start结合构建。

1. electron: electron app;

2. electron-builder: pack the electron app;

3. vue: vue, vue-router.etc

4. webpack: develop and build the vue codes;

...

show package.json

---

Resources for Learning Electron

• electronjs.org/docs - all of Electron's documentation
• electronjs.org/community#boilerplates - sample starter apps created by the community
• electron/electron-quick-start - a very basic starter Electron app
• electron/simple-samples - small applications with ideas for taking them further
• electron/electron-api-demos - an Electron app that teaches you how to use Electron
• hokein/electron-sample-apps - small demo apps for the various Electron APIs

---

License

Electron CC0 1.0 (Public Domain)