feat: init

.env

@@ -0,0 +1,2 @@
+VITE_MY_VARIABLE = 'value2'
+NODE_ENV = 'development'

.env.development

@@ -0,0 +1,2 @@
+VITE_MY_VARIABLE = 'value'
+NODE_ENV = 'development'

.env.production

@@ -0,0 +1,2 @@
+VITE_MY_VARIABLE = 'value2'
+NODE_ENV = 'production'

.env.test

@@ -0,0 +1,2 @@
+VITE_MY_VARIABLE = 'value2'
+NODE_ENV = 'production'

.eslintignore

@@ -0,0 +1,3 @@
+*.html
+*.md
+electron/config.json

.eslintrc-auto-import.json

@@ -0,0 +1,63 @@
+{
+  "globals": {
+    "Component": true,
+    "ComponentPublicInstance": true,
+    "ComputedRef": true,
+    "EffectScope": true,
+    "InjectionKey": true,
+    "PropType": true,
+    "Ref": true,
+    "VNode": true,
+    "computed": true,
+    "createApp": true,
+    "customRef": true,
+    "defineAsyncComponent": true,
+    "defineComponent": true,
+    "effectScope": true,
+    "getCurrentInstance": true,
+    "getCurrentScope": true,
+    "h": true,
+    "inject": true,
+    "isProxy": true,
+    "isReactive": true,
+    "isReadonly": true,
+    "isRef": true,
+    "markRaw": true,
+    "nextTick": true,
+    "onActivated": true,
+    "onBeforeMount": true,
+    "onBeforeUnmount": true,
+    "onBeforeUpdate": true,
+    "onDeactivated": true,
+    "onErrorCaptured": true,
+    "onMounted": true,
+    "onRenderTracked": true,
+    "onRenderTriggered": true,
+    "onScopeDispose": true,
+    "onServerPrefetch": true,
+    "onUnmounted": true,
+    "onUpdated": true,
+    "provide": true,
+    "reactive": true,
+    "readonly": true,
+    "ref": true,
+    "resolveComponent": true,
+    "shallowReactive": true,
+    "shallowReadonly": true,
+    "shallowRef": true,
+    "toRaw": true,
+    "toRef": true,
+    "toRefs": true,
+    "toValue": true,
+    "triggerRef": true,
+    "unref": true,
+    "useAttrs": true,
+    "useCssModule": true,
+    "useCssVars": true,
+    "useSlots": true,
+    "watch": true,
+    "watchEffect": true,
+    "watchPostEffect": true,
+    "watchSyncEffect": true
+  }
+}

.eslintrc.json

@@ -0,0 +1,61 @@
+{
+	"parser": "vue-eslint-parser", // 解析器
+	"env": {
+		"node": true,
+		"es6": true
+	},
+	"parserOptions": {
+		"ecmaVersion": 2020, // 指定js版本
+		"sourceType": "module", // 默认为script，使用es6 module设置为module
+		"parser": {
+			"ts": "@typescript-eslint/parser", // 解析器"
+			"tsx": "@typescript-eslint/parser",
+			"js": "espree"
+		}
+	},
+	"settings": {
+		"import/extensions": [".js", ".jsx", ".ts", ".tsx", ".vue"]
+	},
+	"extends": [
+		// 集成的代码规范
+		"eslint-config-standard",
+		"plugin:@typescript-eslint/recommended",
+		"plugin:vue/vue3-recommended",
+		"plugin:import/errors",
+		"plugin:import/warnings",
+		"plugin:node/recommended",
+		".eslintrc-auto-import.json" // 自动引入
+	],
+	"plugins": ["vue", "@typescript-eslint", "import", "promise", "node"], // 插件
+	"rules": {
+		// 单独配置规则，会覆盖extends的规则
+		"@typescript-eslint/no-var-requires": "off",
+		"@typescript-eslint/ban-types": "off",
+		"@typescript-eslint/no-explicit-any": "off",
+		"@typescript-eslint/no-unused-vars": [
+			"error",
+			{
+				"argsIgnorePattern": "^_",
+				"varsIgnorePattern": "^_"
+			}
+		],
+		"no-unused-vars": [
+			"error",
+			{
+				"argsIgnorePattern": "^_",
+				"varsIgnorePattern": "^_"
+			}
+		],
+		"vue/multi-word-component-names": "off",
+		// node
+		"node/exports-style": ["error", "module.exports"],
+		"node/no-unsupported-features/es-syntax": "off",
+		"node/no-missing-require": "off",
+		"node/no-unpublished-import": "off",
+		// import
+		"import/default": "off",
+		"import/no-unresolved": "off",
+		"node/no-missing-import": "off",
+		"node/no-unpublished-require": "off"
+	}
+}

.gitignore

@@ -0,0 +1,10 @@
+node_modules
+dist
+package.json
+.DS_Store
+
+# local env files
+.vscode
+
+# 发布目录
+release

README.md

@@ -0,0 +1 @@
+# electron+vue3.3+webpack5+typescript

README_ZH.md

@@ -0,0 +1,2 @@
+# electron+vue3.3+webpack5+typescript
+webpack 热更新

babel.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  presets: [
+    '@babel/preset-typescript'
+  ],
+  plugins: [
+    '@vue/babel-plugin-jsx'
+  ]
+}

electron-builder.json

@@ -0,0 +1,9 @@
+{
+  "directories": {
+    "output": "release/macs"
+  },
+  "productName": "测试呀",
+  "appId": "com.electron.test",
+  "asar": true,
+  "asarUnpack": []
+}

electron/config.json

@@ -0,0 +1 @@
+{"MODE_PATH":".env.production"}

electron/main.ts

@@ -0,0 +1,42 @@
+const { app, BrowserWindow } = require('electron')
+const join = require('path').join
+const { MODE_PATH } = require('./config.json')
+// 引入 dotenv 模块
+const dotenv = require('dotenv')
+// 调用 dotenv.config() 方法，读取 .env 文件
+dotenv.config({
+  path: MODE_PATH
+})
+// 现在您可以在代码中访问环境变量
+console.log('环境变量', MODE_PATH)
+console.log('环境变量', process.env.NODE_ENV)
+function createWindow () {
+  const win = new BrowserWindow({
+    width: 800,
+    height: 600,
+    webPreferences: {
+      preload: join(__dirname, 'preload.js'),
+      nodeIntegration: true,
+      contextIsolation: false
+    }
+  })
+  // win.loadFile('index.html')
+  if (process.env.NODE_ENV === 'development') {
+    win.loadURL('http://localhost:8080')
+  } else {
+    win.loadFile(join(__dirname, '..', 'web', 'index.html'))
+  }
+  // win.loadFile(join(__dirname, '..', 'web', 'index.html'))
+  // win.loadURL('http://localhost:8080')
+}
+app.whenReady().then(() => {
+  createWindow()
+  app.on('activate', () => {
+    if (BrowserWindow.getAllWindows().length === 0) {
+      createWindow()
+    }
+  })
+})
+app.on('window-all-closed', () => {
+  app.quit()
+})

electron/preload.ts

@@ -0,0 +1,92 @@
+function domReady (condition = ['complete', 'interactive']) {
+  return new Promise((resolve) => {
+    if (condition.includes(document.readyState)) {
+      resolve(true)
+    } else {
+      document.addEventListener('readystatechange', () => {
+        if (condition.includes(document.readyState)) {
+          resolve(true)
+        }
+      })
+    }
+  })
+}
+
+const safeDOM = {
+  append (parent: Element, child: Element) {
+    if (!Array.from(parent.children).find((e) => e === child)) {
+      parent.appendChild(child)
+    }
+  },
+  remove (parent: Element, child: Element) {
+    if (Array.from(parent.children).find((e) => e === child)) {
+      parent.removeChild(child)
+    }
+  }
+}
+
+/**
+ * https://tobiasahlin.com/spinkit
+ * https://connoratherton.com/loaders
+ * https://projects.lukehaas.me/css-loaders
+ * https://matejkustec.github.io/SpinThatShit
+ */
+function useLoading () {
+  const className = 'loaders-css__square-spin'
+  const styleContent = `
+@keyframes square-spin {
+  25% { transform: perspective(100px) rotateX(180deg) rotateY(0); }
+  50% { transform: perspective(100px) rotateX(180deg) rotateY(180deg); }
+  75% { transform: perspective(100px) rotateX(0) rotateY(180deg); }
+  100% { transform: perspective(100px) rotateX(0) rotateY(0); }
+}
+.${className} > div {
+  animation-fill-mode: both;
+  width: 50px;
+  height: 50px;
+  background: #fff;
+  animation: square-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
+}
+.app-loading-wrap {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #282c34;
+  z-index: 9;
+}
+    `
+  const oStyle = document.createElement('style')
+  const oDiv = document.createElement('div')
+
+  oStyle.id = 'app-loading-style'
+  oStyle.innerHTML = styleContent
+  oDiv.className = 'app-loading-wrap'
+  oDiv.innerHTML = `<div class="${className}"><div></div></div>`
+
+  return {
+    appendLoading () {
+      safeDOM.append(document.head, oStyle)
+      safeDOM.append(document.body, oDiv)
+    },
+    removeLoading () {
+      safeDOM.remove(document.head, oStyle)
+      safeDOM.remove(document.body, oDiv)
+    }
+  }
+}
+
+// ----------------------------------------------------------------------
+
+const { appendLoading, removeLoading } = useLoading()
+domReady().then(appendLoading)
+
+window.onmessage = (ev) => {
+  ev.data.payload === 'removeLoading' && removeLoading()
+}
+
+setTimeout(removeLoading, 1000)