vue + electron 快速入门

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

Electron 官网只有一句简单的话： 使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序。简单点讲，就是有了 Electron，我们就可以用前端技术来写 web 页面，它可以转化为一个桌面应用。
除此之前，Electron 还有其他的一些特性：

    • 基于 Chromium 和 Node.js

    • 兼容 Mac、Windows 和 Linux，可以构建出三个平台的应用程序

Electron 快速上手

先来一个helloword

初始化工程

创建 Electron 工程方式与前端项目别无二致，创建一个目录，然后用 npm 初始化：

mkdir hello-electron && cd hello-electron
npm init -y

安装依赖

npm install --save-dev electron
可能下载会报错，我是使用了cnpm

创建 HTML

在 Electron 中，每个窗口都可以加载本地或者远程 URL，这里我们先创建一个本地的 HTML 文件。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

创建入口文件

类似于 Node.js 启动服务，Electron 启动也需要一个入口文件，这里我们创建 index.js 文件。在这个入口文件里，需要去加载上面创建的 HTML 文件，那么如何加载呢？ Electron 提供了两个模块：

  • app 模块，它控制应用程序的事件生命周期。

  • BrowserWindow 模块，它创建和管理应用程序 窗口。

入口文件是 Node.js 环境，所以可以通过 CommonJS 模块规范来导入 Electron 的模块。同时添加一个 createWindow() 方法来将 index.html 加载进一个新的 BrowserWindow 实例。

// index.js
const { app, BrowserWindow } = require('electron');
function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  })
  win.loadFile('index.html')
}

// index.js
app.whenReady().then(() => {
  createWindow()
})

这样一来就可以通过以下命令打开 Electron 应用程序了！

# 这里会自动去找package.json的main字段对应的文件运行
# 当然 你也可以将命令放进 script 里面
npx electron .
# 注意：后面有一个.要加上

到这里简单的demo就结束了，要看更细化的内容看这个地址：https://mp.weixin.qq.com/s/GlDC-qff5bkOS1UMDEiF8A

------------我是分割线--------------

接下来做vue+electron的例子

1.首先来创建vue项目

这里用的是vue-cli3，如果是低版本请自行升级。

vue create electron-vue-demo

2.自动安装electron

进入到项目根目录，执行：

vue add electron-builder

注意：这里我的node版本低，要升级下node版本。（用的mac）window自行查找资料

// 清除node的cache（清除node的缓存）
sudo npm cache clean -f 
// 安装"n"版本管理工具，管理node（没有错，就是n）
 sudo npm install -g n 
// 更新node版本
sudo n stable 
// 再查一遍本机当前Node
node -v

然后再次执行一次 vue add electron-builder，ok完事！

3.新建src/background.js

在刚刚创建的vue项目src目录下新建background.js，复制以下代码：

'use strict'
import { app, protocol, BrowserWindow } from 'electron'
import {
  createProtocol,
  installVueDevtools
} from 'vue-cli-plugin-electron-builder/lib'
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: {
      nodeIntegration: true
    }
  })
  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 installVueDevtools()
    } 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()
    })
  }
}

以上代码是1.5小节使用自动化方式安装后生成的。

 

4.安装依赖包

在项目根目录执行，安装全部依赖包

cnpm install

5.编译并启动APP

 执行以下命令，开始编译APP，并启动开发环境APP：

npm run electron:serve

编译成功后，就会出现开发环境的客户端了。

6. build最终产品

这里我们已经集成了electron-builder工具，官方文档可以参阅：electron.build/

7.设置APP及安装包图标和设置app名称

修改vue.config.js

chainWebpack: config => {...},
+   pluginOptions: {
+       electronBuilder: {
+           builderOptions: {
+               win: {
+                   icon: './public/app.ico'
+               },
+               mac: {
+                   icon: './public/app.png'
+               },
+               productName: 'AppDemo' // 设置名称
+           }
+       }
+   }

8.打包APP

执行以下命令，可以build工程：

npm run electron:build

最终在dist_electron目录下生成build后的产品。

好了，到这里本文就结束了，后面还会更新electron的相关文章，多学习一些新知识，充实起来，加油！本博客只为记录学习，希望大家共同成长。

同样，有好的知识或者新技术可以共同探讨！

更多细节也可以参考这篇文章：https://zhuanlan.zhihu.com/p/75764907

以上是 vue + electron 快速入门 的全部内容， 来源链接： utcz.com/z/374593.html

回到顶部