浅尝 Electron + Vue3 项目创建

前言

在电脑我们经常使用的 浏览器、听歌软件、vscode等等都是电脑的桌面应用,相对于手机上的应用,桌面应用的硬件资源、内存、带宽等方面都得以充分利用,能够支持更复杂的运行与处理。而作为一名前端开发,正好可以选择 Electron 进行开发桌面应用。

介绍

Electron 是一个使用 JavaScript、HTML 和 CSS 构建跨平台的桌面应用程序。它基于 Node.js 和 Chromium,被 Atom 编辑器和许多其他应用程序使用。Electron 兼容 Mac、Windows 和 Linux,可以构建出三个平台的应用程序。

Electron 文档

安装

首先使用npm init vue@latest来创建一个 Vue3 的项目。

创建完成后,使用 npm install electron -D 来安装 Electron。

Electron 安装问题

js 复制代码
npm install electron -D
// 安装的过程中我们可能会遇到安装卡顿住一动不动,过了好几分钟还是没安装好,或者是下载总是出现不知名错误,很可能是网络环境问题。

这个时候我们可以切换其它源来解决这个问题,例如使用 淘宝源。

例如我现在使用的是 npm,使用命令 npm config get registry,会显示如下:

js 复制代码
https://registry.npmjs.org/

切换源,在终端使用命令 npm config set registry https://registry.npm.taobao.org,再使用命令 npm config get registry,会显示如下:

js 复制代码
https://registry.npm.taobao.org/
// 这个时候证明切换成功了

输入命令:get-executionpolicy

然后:set-executionpolicy remotesigned

然后更改权限为 A

然后命令:get-executionpolicy

vscode 终端

这个时候我用的编辑器是 vscode,我使用 cnpm 命令的时候出现这个问题

我们可以到电脑搜索 PowerShell,右键选择以管理员身份运行。

输入命令 get-executionpolicy

接着输入 set-executionpolicy remotesigned

然后选择 A

最后命令:get-executionpolicy

然后我们就可以愉快的在 vscode 上使用 cnpm 了。

配置

在安装完我们所需的 Electron后,需要在我们创建的项目中进行一些配置。

main.ts、preload.ts

我们现在项目根目录创建 main.ts、preload.ts 文件。

ts 复制代码
// main.ts
// 控制应用生命周期和创建原生浏览器窗口的模组
const { app, BrowserWindow } = require('electron')
const path = require('path')

function createWindow () {
  // 创建浏览器窗口
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  // 加载 index.html
  // 在官方案例中展示的是 index.html 的内容
  // mainWindow.loadFile('index.html')
  mainWindow.loadURL('http://127.0.0.1:5173/')

  // 打开开发工具
  // mainWindow.webContents.openDevTools()
}

// 这段程序将会在 Electron 结束初始化
// 和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {
  createWindow()

  app.on('activate', function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})
js 复制代码
// preload.ts
// 所有Node.js API都可以在预加载过程中使用。
// 它拥有与Chrome扩展一样的沙盒。
window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }

  for (const dependency of ['chrome', 'node', 'electron']) {
    replaceText(`${dependency}-version`, process.versions[dependency])
  }
})

package.json

在 scripts 下配置 Electron 的启动命令 npm start

"start": "electron .",

sql 复制代码
"scripts": {
    "start": "electron .",
    "dev": "vite",
    "build": "run-p type-check \"build-only {@}\" --",
    "preview": "vite preview",
    "build-only": "vite build",
    "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false"
},

初次启动

Electron 进行桌面端开发,首先需要一个窗口展示内容。

我们先运行启动 Vue 的项目,得到地址 http://127.0.0.1:5173/

再将这个地址放在我们创建的 main.ts 文件中。

js 复制代码
// 在这个函数中 mainWindow 里有 loadURL 启动url
function createWindow () {
  // 创建浏览器窗口
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })
  
  // ---------------------- 修改部分
  // mainWindow.loadFile('index.html')
  mainWindow.loadURL('http://127.0.0.1:5173/')

  // 打开开发工具
  // mainWindow.webContents.openDevTools()
}

然后运行命令 npm start 就会弹出如下窗口:

可以看出内容展示的是 vue 项目里的内容。在 vue 中修改内容,会同步到 Electron 窗口中。

相关推荐
Smile_Gently1 小时前
前端:最简单封装nmp插件(组件)过程。
前端·javascript·vue.js·elementui·vue
luckycoke8 小时前
小程序立体轮播
前端·css·小程序
一 乐8 小时前
高校体育场管理系统系统|体育场管理系统小程序设计与实现(源码+数据库+文档)
前端·javascript·数据库·spring boot·高校体育馆系统
懒羊羊我小弟8 小时前
常用Webpack Loader汇总介绍
前端·webpack·node.js
祈澈菇凉8 小时前
ES6模块的异步加载是如何实现的?
前端·javascript·es6
我爱学习_zwj9 小时前
4.从零开始学会Vue--{{组件通信}}
前端·javascript·vue.js·笔记·前端框架
顾比魁9 小时前
XSS盲打:当攻击者“盲狙”管理员
前端·网络安全·xss
黑客老李9 小时前
新手小白如何挖掘cnvd通用漏洞之存储xss漏洞(利用xss钓鱼)
java·运维·服务器·前端·xss
晚风予星9 小时前
简记|LogicFlow自定义BPMN元素节点
前端
Json____9 小时前
使用html css js 开发一个 教育机构前端静态网站模板
前端·css·html·js·前端学习·企业站·教育机构网站