Procházet zdrojové kódy

add vue-cli-plugin-electron-builder

Michael Wang před 3 roky
rodič
revize
63742b6bba
6 změnil soubory, kde provedl 725 přidání a 23 odebrání
  1. 3 0
      .gitignore
  2. 13 2
      package.json
  3. 81 0
      src/background.ts
  4. 11 8
      src/components/HelloWorld.vue
  5. 39 0
      vue.config.js
  6. 578 13
      yarn.lock

+ 3 - 0
.gitignore

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

+ 13 - 2
package.json

@@ -3,16 +3,24 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
+    "start": "vue-cli-service serve",
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "lint": "vue-cli-service lint",
+    "electron:build:win": "vue-cli-service electron:build --win --x64 --ia32",
+    "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": "^3.0.0",
     "vue-router": "^4.0.0-0"
   },
   "devDependencies": {
+    "@types/electron-devtools-installer": "^2.2.0",
     "@typescript-eslint/eslint-plugin": "^4.18.0",
     "@typescript-eslint/parser": "^4.18.0",
     "@vue/cli-plugin-babel": "~4.5.0",
@@ -23,10 +31,13 @@
     "@vue/compiler-sfc": "^3.0.0",
     "@vue/eslint-config-prettier": "^6.0.0",
     "@vue/eslint-config-typescript": "^7.0.0",
+    "electron": "^13.0.0",
+    "electron-devtools-installer": "^3.1.0",
     "eslint": "^6.7.2",
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-vue": "^7.0.0",
     "prettier": "^2.2.1",
-    "typescript": "~4.1.5"
+    "typescript": "~4.1.5",
+    "vue-cli-plugin-electron-builder": "~2.1.1"
   }
 }

+ 81 - 0
src/background.ts

@@ -0,0 +1,81 @@
+"use strict";
+
+import { app, protocol, BrowserWindow } from "electron";
+import { createProtocol } from "vue-cli-plugin-electron-builder/lib";
+import installExtension, { VUEJS3_DEVTOOLS } from "electron-devtools-installer";
+const isDevelopment = process.env.NODE_ENV !== "production";
+
+// Scheme must be registered before the app is ready
+protocol.registerSchemesAsPrivileged([
+  { scheme: "app", privileges: { secure: true, standard: true } },
+]);
+
+async function createWindow() {
+  // Create the browser window.
+  const 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 as unknown as boolean,
+      contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION,
+    },
+  });
+
+  if (process.env.WEBPACK_DEV_SERVER_URL) {
+    // Load the url of the dev server if in development mode
+    await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL as string);
+    if (!process.env.IS_TEST) win.webContents.openDevTools();
+  } else {
+    createProtocol("app");
+    // Load the index.html when not in development
+    win.loadURL("app://./index.html");
+  }
+}
+
+// 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 (BrowserWindow.getAllWindows().length === 0) 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(VUEJS3_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();
+    });
+  }
+}

+ 11 - 8
src/components/HelloWorld.vue

@@ -102,15 +102,18 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from "vue";
+<script setup lang="ts">
+// import { defineComponent } from "vue";
 
-export default defineComponent({
-  name: "HelloWorld",
-  props: {
-    msg: String,
-  },
-});
+import { ref } from "vue";
+
+// export default defineComponent({
+//   name: "HelloWorld",
+//   props: {
+//     msg: String,
+//   },
+// });
+const msg = ref("");
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->

+ 39 - 0
vue.config.js

@@ -0,0 +1,39 @@
+var webpack = require("webpack");
+/** @type {import("@vue/cli-service").ProjectOptions} */
+module.exports = {
+  // 这里设置项目的路径,比如 '/admin' 。设置以后 BASE_URL就有值了。
+  // 注意这解决不了CDN的问题,CDN的问题要另行研究。
+  // 可能的方案是另设一个替代 BASE_URL 的环境变量解决 <%%= BASE_URL %%>favicon.ico 和 ${process.env.BASE_URL}service-worker.js
+  publicPath: "/",
+  lintOnSave: process.env.NODE_ENV !== "production" ? true : "error",
+  configureWebpack: {
+    devtool: "source-map",
+    plugins: [
+      // Ignore all locale files of moment.js
+      // TODO: use webpack stats to check if iview locale matters
+      new webpack.IgnorePlugin(/^\.\/locale$/, /moment|iview$/),
+    ],
+    // sequelize bug: https://github.com/sequelize/sequelize/issues/7509
+    externals: ["pg", "sqlite3", "tedious", "pg-hstore"],
+  },
+  transpileDependencies: [/\bvue-awesome\b/],
+  pluginOptions: {
+    electronBuilder: {
+      externals: [],
+      builderOptions: {
+        extraFiles: ["extra/**"],
+        win: {
+          target: "portable",
+          signAndEditExecutable: false,
+          publisherName: "启明泰和",
+          publish: {
+            provider: "generic",
+            url: "url",
+            channel: "latest",
+            publishAutoUpdate: false,
+          },
+        },
+      },
+    },
+  },
+};

Rozdílová data souboru nebyla zobrazena, protože soubor je příliš velký
+ 578 - 13
yarn.lock


Některé soubory nejsou zobrazeny, neboť je v těchto rozdílových datech změněno mnoho souborů