2.Electron开发模式

书诚小驿2024/10/09前端知识库Electron

Electron 开发模式

前言

E 关于 electron，我更想说 vue3，因为目前的前端来说，会一个 vue 或 react 已经是基本框架了，不能作为什么亮点，但是对于多会一个 electron 是肯定不一样的，而 electron 是开发桌面应用的（简单来说就是电脑软件），但是有一个误区就是，我们不要把代码聚焦到 electron 上，而是聚焦到 vue3 上（其实是用 vue3 的代码来开发项目的，electron 只是看看 api 之类的），所以这样的情况下，学习成本一点都不高。

一、了解 `Electron` 是什么

Electron 是什么open in new window

Electron 是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。嵌入 Chromium 和 Node.js 到二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建在 Windows 上运行的跨平台应用 macOS 和 Linux。

新建 electron_study 项目
打开cd electron_study终端，然后执行以下命令

// 生成package.json
npm init -y
// 安装electron
npm i electron --save-dev
// 安装国内淘宝镜像
npm set registry https://registry.npmmirror.com/

如果遇到了npm安装electron总失败的问题，解决失败步骤

// 生成package.json
npm init -y
// 安装国内淘宝镜像
npm install -g cnpm --registry=https://registry.npmmirror.com
// 安装electron
cnpm install --save-dev electron

/**
 * 创建并显示一个新的浏览器窗口。
 * 当 Electron 应用程序准备就绪时，调用此函数。
 * 窗口大小设置为宽度 800 像素，高度 600 像素，并加载 'index.html' 文件。
 */
const { app, BrowserWindow } = require("electron");

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
  });

  win.loadFile("index.html");
};

app.whenReady().then(() => {
  createWindow();
});

package.json 中添加scripts指令

"scripts": {
    "start": "electron .",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

启动项目

npm start

项目新建index.html文件,重新启动

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <div>hello world</div>
  </body>
</html>

二、当前流行的开发模式:

electon+vite+vue3 文档open in new window

创建electron_vite_app项目

npx degit alex8088/electron-vite-boilerplate electron_vite_app
cd electron_vite_app

npm install
npm run dev

vite 构建工具，需要手动安装路由和 pinia

cnpm i vue-router -S
cnpm i pinia -S

项目根目录render/src/main.js

import { createApp } from "vue";
import App from "./App.vue";
import Router from "./router/index.js";
import { createPinia } from "pinia";

createApp(App).use(Router).use(createPinia()).mount("#app");

项目根目录新建render/src/router/index.js

import { createRouter, createWebHistory } from "vue-router";
import HomeView from "../views/Home.vue";

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: "/",
      name: "home",
      component: HomeView,
    },
  ],
});

export default router;

项目根目录新建render/src/store/index.js

import { defineStore } from "pinia";
export const useStore = defineStore("main", {
  state: () => ({
    count: 0,
  }),
  getters: {},
  actions: {},
});

项目根目录新建render/src/App.vue

<script setup lang="ts"></script>

<template>
  <router-view></router-view>
</template>

项目根目录新建render/src/views/Home.vue

<template>
  <div></div>
</template>

<script setup>
import { useStore } from "@store";
let store = useStore();
console.log("store", store.count);
</script>

<style lang="scss" scoped></style>

注意@store 的引入式报错问题

在electron.vite.config.ts中添加如下代码

renderer: {
    resolve: {
      alias: {
        '@renderer': resolve('src/renderer/src'),
        '@store': resolve('src/renderer/src/store')
      }
    },
    plugins: [vue()]
  }

三、project directory 项目目录结构

.vscode
- ...
build #打包资源
- entitlements.mac.plist
- icon.icns
- icon.ico
- icon.png
- notarize.js
src # 主代码
- main # 主进程
  - index.ts
- preload # preload 脚本
  - index.d.ts
  - index.ts
- renderer # 渲染进程，结合 vue
  - src
    - assets #静态资源
    - components #scui 全局组件
    - views #各页面组件
    - mixins #混入
    - api #接口
    - config #系统参数常量和路由表
    - router #路由
    - layout #布局
    - directives #自定义指令
    - App.vue #vue 入口
    - env.d.ts
    - main.ts
  - index.html
.editorconfig
.eslintrc.cjs
.prettierrc.yaml
electron-builder.yml #打包配置
electron.vite.config.ts #构建配置
package.json
tsconfig.json
tsconfig.node.json
tsconfig.web.json

2.Electron开发模式

Electron 开发模式

前言

一、了解 Electron 是什么

二、当前流行的开发模式:

三、project directory 项目目录结构

目录

一、了解 `Electron` 是什么