update

Author: Pure-Peace

README.md

@@ -1,6 +1,6 @@
 ![bigLogo](http://otsu.fun/big_logo.png)
 # 🔥vue-cli-electron-template
-⭐Using `vue-cli3` and `Electron6` built a modular desktop application template. Convenient packaging and program language switching,  with a custom borderless window, including `vue-router`, `vue-i18n`, `axios` and more common components, as well as some demo functions.
+⭐Using `vue-cli 3` and `Electron 8` built a modular desktop application template. Convenient packaging and program language switching,  with a custom borderless window, including `vue-router`, `vue-i18n`, `axios`, `electron-builder` and more common components, as well as some demo functions.
 
 ![npm](https://img.shields.io/npm/v/@vue/cli?color=aa&label=vue-cli)
 ![GitHub package.json version](https://img.shields.io/github/package-json/v/Pure-Peace/vue-cli-electron-template?color=yellow&logo=yellow&logoColor=yellow)
@@ -15,7 +15,7 @@
 
 <h2 align="center">⚡-Introduction-</h2>
 
-🚀Build with `vue-cli` & `electron-builder`, modular design. added common plugins and demo features. You can happily use the `svg` icon in this project, use the `i18n` multi-language comfortably, switch the application language (overall! including the native menu of the electron and the browser page), Quickly manage multiple windows and menus, make network requests more convenient.
+🚀A lightweight, modular template. Added common plugins and demo features. You can happily use the `svg` icon in this project, use the `i18n` multi-language comfortably, switch the application language (including the native components and the browser page), make network requests more convenient.
 
 [Document](https://github.com/Pure-Peace/vue-cli-electron-template/wiki)
 
@@ -32,7 +32,7 @@
 - 🎨Modular design with object-oriented writing (mainProcess)
 - 🍰Language switching for the entire program
 - 🐳An svg component based on `svg-sprite-loader`
-- 🏀`Electron6`: Demo of some apis.
+- 🏀`Electron 8`: Demo of some apis.
 - 🍉`vue-i18n`: Added demonstration of language switching, including language switching effect of `electron` native menu.
 - 🍩`axios`: Added request demo.
 - 🌼Use `ESlint` for code style specification.
@@ -49,6 +49,7 @@
 
 <h2 align="center">🏆-Start-</h2>
 
+- `&` = `or`
 
  1. **🍬Clone this repository**
 
@@ -101,6 +102,14 @@ yarn packapp & npm run packapp
 - 🙉`src/mainProcess/windows`: windows and windows manager.
 
 ---
-**🔞postscript:**
+## 🌹Thanks
 
-🌹Beginner electron, any suggestion is appreciated.
+
+<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
+<!-- prettier-ignore -->
+| [<img src="https://avatars0.githubusercontent.com/u/1502581?&v=4" width="100px;" alt="Hancel Lin"/><br /><sub><b>Hancel Lin</b></sub>](https://github.com/imlinhanchao)<br /> |
+| :---: |
+
+<!-- ALL-CONTRIBUTORS-LIST:END -->
+
+🌺Welcome your suggestions.

README_ZH.md

@@ -1,6 +1,6 @@
 ![bigLogo](http://otsu.fun/big_logo.png)
 # 🔥vue-cli-electron-template
-⭐使用`vue-cli3`和`Electron6`构建的一个模块化的桌面应用程序模板。可以方便进行的打包、切换程序语言，使用自定义无边框窗口，并且添加了`vue-router`、`vue-i18n`、`axios`等等常用插件，还提供了一些演示功能。
+⭐使用`vue-cli 3`和`Electron 8`构建的模块化的桌面应用程序模板。可以方便进行的打包、切换程序语言，使用自定义无边框窗口，并且添加了`vue-router`、`vue-i18n`、`axios`、`electron-builder`等常用插件以及一些演示功能。
 
 ![npm](https://img.shields.io/npm/v/@vue/cli?color=aa&label=vue-cli)
 ![GitHub package.json version](https://img.shields.io/github/package-json/v/Pure-Peace/vue-cli-electron-template?color=yellow&logo=yellow&logoColor=yellow)
@@ -15,7 +15,7 @@
 
 <h2 align="center">⚡-介绍！-</h2>
 
-🚀构建于`vue-cli` & `electron-builder`，模块化设计。添加了常用插件及演示功能。你可以在本项目中愉快的使用`svg`图片，舒适的享受`i18n`多国语言支持， 切换程序语言（整个程序！包括electron原生菜单及浏览器页面)，快速进行多窗口管理、菜单管理，并且具有一个方便快捷的网络请求方式。
+🚀轻量、模块化的模板。添加了常用插件及演示功能，你可以在本项目中愉快的使用`svg`图片，舒适的享受`i18n`多国语言支持，切换程序语言（包括原生组件及浏览器页面)，并且具有一个方便快捷的网络请求方式。
 
 [Document文档](https://github.com/Pure-Peace/vue-cli-electron-template/wiki)
 
@@ -29,10 +29,10 @@
 
 ## 🔍以及:
 - ⛅自定义的原生无边框窗口
-- 🎨使用面向对象的模块化写法（主进程文件）
+- 🎨主进程可进行模块化管理
 - 🍰整个程序都可以进行方便的语言切换
 - 🐳一个方便你使用`svg`图片的组件（基于`svg-sprite-loader`插件）
-- 🏀`Electron6`：添加了一些api演示
+- 🏀`Electron 8`：添加了一些api演示
 - 🍉`vue-i18n`：添加了语言切换演示，包括`electron`原生菜单
 - 🍩`axios`：添加了网络请求演示
 - 🌼使用`ESlint`进行代码风格规范
@@ -52,6 +52,8 @@
 
 
  1. **🍬克隆这个仓库**
+
+ - `&` = `或`
 
 ```bash
 git clone https://github.com/Pure-Peace/vue-cli-electron-template
@@ -69,7 +71,6 @@ cd vue-cli-electron-template
 yarn 或 npm install
 ```` 
 
-
  4. **🌽启动应用**
 
 ```bash
@@ -103,7 +104,14 @@ yarn packapp 或 npm run packapp
 - 🙉`src/mainProcess/windows`：多窗口及窗口管理器
 
 ---
-**🔞后记：**
+## 🌹特别感谢
+
+
+<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
+<!-- prettier-ignore -->
+| [<img src="https://avatars0.githubusercontent.com/u/1502581?&v=4" width="100px;" alt="Hancel Lin"/><br /><sub><b>Hancel Lin</b></sub>](https://github.com/imlinhanchao)<br /> |
+| :---: |
 
-🌹初学electron，欢迎提建议……
+<!-- ALL-CONTRIBUTORS-LIST:END -->
 
+🌺欢迎您提出建议

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-cli-electron-template",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -16,29 +16,29 @@
     "core-js": "^3.6.4",
     "svg-sprite-loader": "^4.2.1",
     "vue": "^2.6.11",
-    "vue-i18n": "^8.0.0",
-    "vue-router": "^3.1.5",
-    "vuex": "^3.1.2"
+    "vue-i18n": "^8.15.5",
+    "vue-router": "^3.1.6",
+    "vuex": "^3.1.3"
   },
   "devDependencies": {
-    "@kazupon/vue-i18n-loader": "^0.3.0",
-    "@vue/cli-plugin-babel": "~4.2.0",
-    "@vue/cli-plugin-eslint": "~4.2.0",
-    "@vue/cli-plugin-router": "~4.2.0",
-    "@vue/cli-plugin-vuex": "~4.2.0",
-    "@vue/cli-service": "~4.2.0",
-    "@vue/eslint-config-standard": "^5.1.0",
-    "axios": "^0.18.0",
-    "babel-eslint": "^10.0.3",
-    "electron": "^6.0.0",
+    "@intlify/vue-i18n-loader": "^0.6.1",
+    "@vue/cli-plugin-babel": "~4.2.3",
+    "@vue/cli-plugin-eslint": "~4.2.3",
+    "@vue/cli-plugin-router": "~4.2.3",
+    "@vue/cli-plugin-vuex": "~4.2.3",
+    "@vue/cli-service": "~4.2.3",
+    "@vue/eslint-config-standard": "^5.1.2",
+    "axios": "^0.19.2",
+    "babel-eslint": "^10.1.0",
+    "electron": "^8.1.1",
     "electron-log": "^4.1.0",
-    "eslint": "^6.7.2",
+    "eslint": "^6.8.0",
     "eslint-plugin-import": "^2.20.1",
     "eslint-plugin-node": "^11.0.0",
     "eslint-plugin-promise": "^4.2.1",
-    "eslint-plugin-standard": "^4.0.0",
-    "eslint-plugin-vue": "^6.1.2",
-    "less": "^3.0.4",
+    "eslint-plugin-standard": "^4.0.1",
+    "eslint-plugin-vue": "^6.2.2",
+    "less": "^3.11.1",
     "less-loader": "^5.0.0",
     "vue-cli-plugin-axios": "~0.0.4",
     "vue-cli-plugin-electron-builder": "~1.4.6",

src/background.js

@@ -10,4 +10,6 @@ import AppManager from './mainProcess/appManager'
 // Scheme must be registered before the app is ready
 protocol.registerSchemesAsPrivileged([{ scheme: 'app', privileges: { secure: true, standard: true } }])
 
-export default AppManager
+const app = new AppManager()
+
+export default app

src/mainProcess/appManager.js

@@ -1,10 +1,11 @@
 import { Tray } from 'electron'
 
-import EventManager from './events/eventsManager'
-
-import WindowManager from './windows/windowsManager'
+// management
+import EventManager from './events'
+import WindowManager from './windows'
 import MenuManager from './menus'
 
+// plugins
 import Translator from './plugins/translator'
 
 class AppManager {
@@ -14,15 +15,15 @@ class AppManager {
 
     // 窗口管理器，主要负责管理、创建窗口
     // Window manager, mainly responsible for managing and creating windows
-    this.windowManager = new WindowManager()
+    this.windowManager = new WindowManager(this)
 
     // 菜单管理器，主要负责获取菜单对象
     // Menu manager, mainly responsible for get the menu object
     this.menuManager = new MenuManager(this)
 
     // 事件管理器，主要负责初始化ipc、app事件
     // Event manager, mainly responsible for initializing ipc, app events
-    EventManager.initEvents(this)
+    this.eventManager = new EventManager(this)
   }
 
   // 初始化app，创建窗口及托盘
@@ -57,4 +58,4 @@ class AppManager {
   }
 }
 
-export default new AppManager()
+export default AppManager

src/mainProcess/events/app/index.js

@@ -22,7 +22,7 @@ class AppEvents {
 
     // app退出之前
     app.on('before-quit', () => {
-      windowManager.mainWindow.tray.destroy()
+      appManager.tray.destroy()
     })
 
     // 所有窗口都被关闭

src/mainProcess/events/eventsManager.js

@@ -0,0 +1,17 @@
+import app from './app'
+import ipc from './ipc'
+
+class EventManager {
+  // 创建app、ipc事件
+  constructor (appManager) {
+    this.appManager = appManager
+    this.init()
+  }
+
+  init () {
+    app.create(this.appManager)
+    ipc.create(this.appManager)
+  }
+}
+
+export default EventManager