init

Author: wuyue92tree

.gitignore

@@ -21,3 +21,6 @@ pnpm-debug.log*
 *.njsproj
 *.sln
 *.sw?
+
+#Electron-builder output
+/dist_electron

README.md

@@ -1,24 +1,82 @@
 # travis-electron-vue-demo
 
-## Project setup
+通过vue-cli及vue-cli-plugin-electron-builder插件创建electron-vue项目
+
+
+# 安装
+
+## vue-cli
+
+```
+# 卸载老版本vue-cli
+yarn global remove vue-cli
+yarn global add @vue/cli
+```
+## yarn
+```
+# 设置yarn源为淘宝镜像
+yarn config set registry https://registry.npm.taobao.org
+
+# 设置代理
+yarn config set proxy  http://username:password@server:port
+yarn config set https-proxy http://username:password@server:port
+
+# 删除代理
+yarn config delete proxy
+yarn config delete https-proxy
+```
+
+
+# 我的版本
+- node：10.15.3
+- vue-cli：4.5.7
+- yarn：1.21.1
+
+# 初始化
+
+## 创建项目
+
 ```
-yarn install
+vue create <project_name>
 ```
 
-### Compiles and hot-reloads for development
+## 集成electron
+
 ```
-yarn serve
+vue add vue-cli-plugin-electron-builder
 ```
 
-### Compiles and minifies for production
+## 更新electron
+
 ```
-yarn build
+yarn add electron@<version> -D
 ```
 
-### Lints and fixes files
+# FAQ
+
+## electorn:serve执行时出现超时告警问题
+
 ```
-yarn lint
+ INFO  Launching Electron...
+Failed to fetch extension, trying 4 more times
+Failed to fetch extension, trying 3 more times
+Failed to fetch extension, trying 2 more times
+Failed to fetch extension, trying 1 more times
+Failed to fetch extension, trying 0 more times
+Vue Devtools failed to install: Error: net::ERR_CONNECTION_TIMED_OUT
 ```
+造成上述告警原因是，在启动时会对vue.js devtools进行检查，如果不存在会进行联网下载，但由于google被墙，所以必然会下载失败，便会显示这样的告警了。
+
+> 解决方案：
 
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
+在background.js中，禁用掉下载插件的逻辑，便可以解决这一问题
+
+```
+// Install Vue Devtools
+try {
+  // await installExtension(VUEJS_DEVTOOLS)
+  console.log('Skip download Vue Devtools.')
+} catch (e) {
+  console.error('Vue Devtools failed to install:', e.toString())
+}
+```

docker-build.sh

@@ -0,0 +1,9 @@
+#! /bin/bash
+docker run --rm -ti \
+  --env-file <(env | grep -iE 'DEBUG|NODE_|ELECTRON_|YARN_|NPM_|CI|CIRCLE|TRAVIS_TAG|TRAVIS|TRAVIS_REPO_|TRAVIS_BUILD_|TRAVIS_BRANCH|TRAVIS_PULL_REQUEST_|APPVEYOR_|CSC_|GH_|GITHUB_|BT_|AWS_|STRIP|BUILD_') \
+  --env ELECTRON_CACHE="/root/.cache/electron" \
+  --env ELECTRON_BUILDER_CACHE="/root/.cache/electron-builder" \
+  -v ${PWD}:/project \
+  -v ~/.cache/electron:/root/.cache/electron \
+  -v ~/.cache/electron-builder:/root/.cache/electron-builder \
+  electronuserland/builder:wine

icon/darwin/icon.icns

@@ -1,12 +1,19 @@
 {
   "name": "travis-electron-vue-demo",
-  "version": "0.1.0",
+  "author": "wuyue <[email protected]>",
+  "description": "An electron-vue project",
+  "version": "1.0.0",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "lint": "vue-cli-service lint",
+    "electron:build": "vue-cli-service electron:build",
+    "electron:serve": "vue-cli-service electron:serve",
+    "postinstall": "electron-builder install-app-deps",
+    "postuninstall": "electron-builder install-app-deps"
   },
+  "main": "background.js",
   "dependencies": {
     "core-js": "^3.6.5",
     "vue": "^2.6.11",
@@ -21,6 +28,8 @@
     "@vue/cli-service": "~4.5.0",
     "@vue/eslint-config-standard": "^5.1.2",
     "babel-eslint": "^10.1.0",
+    "electron": "^9.0.0",
+    "electron-devtools-installer": "^3.1.0",
     "eslint": "^6.7.2",
     "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-node": "^11.1.0",
@@ -30,6 +39,7 @@
     "less": "^3.0.4",
     "less-loader": "^5.0.0",
     "lint-staged": "^9.5.0",
+    "vue-cli-plugin-electron-builder": "~2.0.0-rc.4",
     "vue-template-compiler": "^2.6.11"
   },
   "gitHooks": {

icon/icon.png

@@ -0,0 +1,90 @@
+'use strict'
+
+import { app, protocol, BrowserWindow } from 'electron'
+import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
+// import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'
+const isDevelopment = process.env.NODE_ENV !== 'production'
+
+// Keep a global reference of the window object, if you don't, the window will
+// be closed automatically when the JavaScript object is garbage collected.
+let win
+
+// Scheme must be registered before the app is ready
+protocol.registerSchemesAsPrivileged([
+  { scheme: 'app', privileges: { secure: true, standard: true } }
+])
+
+function createWindow () {
+  // Create the browser window.
+  win = new BrowserWindow({
+    width: 800,
+    height: 600,
+    webPreferences: {
+      // Use pluginOptions.nodeIntegration, leave this alone
+      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
+      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION
+    }
+  })
+
+  if (process.env.WEBPACK_DEV_SERVER_URL) {
+    // Load the url of the dev server if in development mode
+    win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
+    if (!process.env.IS_TEST) win.webContents.openDevTools()
+  } else {
+    createProtocol('app')
+    // Load the index.html when not in development
+    win.loadURL('app://./index.html')
+  }
+
+  win.on('closed', () => {
+    win = null
+  })
+}
+
+// Quit when all windows are closed.
+app.on('window-all-closed', () => {
+  // On macOS it is common for applications and their menu bar
+  // to stay active until the user quits explicitly with Cmd + Q
+  if (process.platform !== 'darwin') {
+    app.quit()
+  }
+})
+
+app.on('activate', () => {
+  // On macOS it's common to re-create a window in the app when the
+  // dock icon is clicked and there are no other windows open.
+  if (win === null) {
+    createWindow()
+  }
+})
+
+// This method will be called when Electron has finished
+// initialization and is ready to create browser windows.
+// Some APIs can only be used after this event occurs.
+app.on('ready', async () => {
+  if (isDevelopment && !process.env.IS_TEST) {
+    // Install Vue Devtools
+    try {
+      // await installExtension(VUEJS_DEVTOOLS)
+      console.log('Skip download Vue Devtools.')
+    } catch (e) {
+      console.error('Vue Devtools failed to install:', e.toString())
+    }
+  }
+  createWindow()
+})
+
+// Exit cleanly on request from parent process in development mode.
+if (isDevelopment) {
+  if (process.platform === 'win32') {
+    process.on('message', (data) => {
+      if (data === 'graceful-exit') {
+        app.quit()
+      }
+    })
+  } else {
+    process.on('SIGTERM', () => {
+      app.quit()
+    })
+  }
+}

icon/linux/icon.png

@@ -0,0 +1,31 @@
+module.exports = {
+  pluginOptions: {
+    electronBuilder: {
+      builderOptions: {
+        // options placed here will be merged with default configuration and passed to electron-builder
+        productName: 'travis-electron-vue-demo',
+        appId: 'com.example.travis-electron-vue-demo',
+        nsis: {
+          oneClick: false,
+          allowToChangeInstallationDirectory: true,
+          installerIcon: 'icon/win32/icon.ico',
+          createDesktopShortcut: true,
+          createStartMenuShortcut: true
+        },
+        mac: {
+          icon: 'icon/darwin/icon.icns',
+          artifactName: '${name}-setup-${version}.${ext}',
+          target: 'pkg'
+        },
+        win: {
+          icon: 'icon/win32/icon.ico',
+          artifactName: '${name}-setup-${version}.${ext}'
+        },
+        linux: {
+          icon: 'icon/linux/icon.png',
+          artifactName: '${name}-setup-${version}.${ext}'
+        }
+      }
+    }
+  }
+}