前言

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

一、了解electron是什么

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

二、了解electron本身开发模式

刚在了解electron是什么的时候，强调了，electron是一个使用html、js、css构建的桌面应用程序框架。所以本身的开发模式就是多个html、可能多个js、多个css来完成的桌面应用（电脑软件），但是这不就是我们过去的传统开发模式吗？在前端的发展，已经有了spa单页面应用的开发模式，利用组件来维护页面之间的关系是比较好的。所以原本的开发模式“可能”并不适合现在的前端开发模式，我们先来了解一下，它本身的模式，最后我们再来看一下：我们的开发模式。

本身开发模式流程：快速入门

2.1 安装指南

npm init -y
npm install electron --save-dev

2.2 新建index.js

const { app, BrowserWindow } = require('electron')

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

  win.loadFile('index.html')
}

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

2.3 运行electron项目：修改package.json

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "Hello World!",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Jane Doe",
  "license": "MIT",
  "devDependencies": {
    "electron": "23.1.3"
  }
}

//使用  npm run start  启动

2.4 体验多html、js、css的开发模式

const { app, BrowserWindow , Menu } = require('electron')

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

  win.loadFile('index.html')
   //定义菜单
   const mainMenu = Menu.buildFromTemplate(  menuTemplate  );
   //设置菜单，才展示出来
   Menu.setApplicationMenu( mainMenu );
}

const createAddWindow = ()=>{
    
    const wins = new BrowserWindow({
        width: 800,
        height: 600
    })
    
    wins.loadFile('add.html');

}
//定义菜单
const menuTemplate = [
    {
        label:'文件',
        submenu:[
            {
                label:'新增一条记录',
                click:()=>{
                    createAddWindow();
                }
            },
            {
                label:'退出程序',
                accelerator:process.platform=='darwin'?'Command + W' : 'ctrl + W',
                click:()=>{
                    app.quit();
                }
            }
        ]
    },
    {
        label:'开发者工具',
        submenu:[
            {
                label:'打开/关闭',
                //设定快捷键
                accelerator:process.platform=='darwin'?'Command + I' : 'ctrl + I',
                //菜单事件
                click:( item , focusedWindow )=>{
                    focusedWindow.toggleDevTools();
                }
            },
            {
                label:'刷新页面',
                role:'reload',
                accelerator:process.platform=='darwin'?'Command + T' : 'ctrl + T',
            }
        ]
    }
];


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

然而这种开发模式不是我们想要的

三、我们的开发模式：electron + vite + vue3

3.1 参考网址： https://evite.netlify.app/

3.2 安装步骤

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

npm install
npm run dev

3.3 因为是基于vite构建工具，所以要自己安装路由和状态管理

3.4 安装路由：npm install vue-router -S

3.5 新建：router/index.js

3.6 router/index.js写入内容

import { createRouter, createWebHashHistory } from "vue-router";
export default createRouter({
	history: createWebHashHistory(),//hash模式
    routes:[{ path: "/", component: Login }]//路由配置规则数组
})

3.7 main.ts中use一下router

use(router)

下节课预告

1. 讲述项目的目录结构
2. 安装store：pinia