使用vue+electron打包客户端

最新推荐文章于 2024-04-23 10:40:06 发布

杭州七先生

最新推荐文章于 2024-04-23 10:40:06 发布

阅读量391

点赞数

分类专栏：安全工具

杭州七先生

本文链接：https://blog.csdn.net/qq_32757749/article/details/115507830

版权

安全工具专栏收录该内容

3 篇文章 0 订阅

订阅专栏

npm下载

下载地址：https://www.npmjs.com/get-npm
安装完之后
在这里插入图片描述

输入

node -v
npm -v

查看安装是否正常。
在这里插入图片描述

设置镜像

npm config edit

将代码粘贴进去

electron_mirror=https://npm.taobao.org/mirrors/electron/
electron-builder-binaries_mirror=https://npm.taobao.org/mirrors/electron-builder-binaries/

在这里插入图片描述

electron

github链接：https://github.com/electron/electron

安装electron

mkdir test
cd test
npm init   （配置时输入main.js） 如下图
npm install  ---save-dev electron

在这里插入图片描述
新建main.js(入口文件)并写入如下代码

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

function createWindow () {   
  // 创建浏览器窗口
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  // 并且为你的应用加载index.html
  win.loadFile('index.html')

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

// Electron会在初始化完成并且准备好创建浏览器窗口时调用这个方法
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(createWindow)

//当所有窗口都被关闭后退出
app.on('window-all-closed', () => {
  // 在 macOS 上，除非用户用 Cmd + Q 确定地退出，
  // 否则绝大部分应用及其菜单栏会保持激活。
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // 在macOS上，当单击dock图标并且没有其他窗口打开时，
  // 通常在应用程序中重新创建一个窗口。
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

// 您可以把应用程序其他的流程写在在此文件中
// 代码 也可以拆分成几个文件，然后用 require 导入。

新建index.html文件

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
	<h1>Hello  苏宇!!!</h1>
</body>
</html>

修改package.json

"scripts": {
	"start": "electron ."
},

在这里插入图片描述
测试运行：

npm run start

在这里插入图片描述
安装打包神器electron-packager：

sudo npm install electron-packager -g

快速打包

electron-packager .

在这里插入图片描述

杭州七先生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用vue+electron打包客户端

npm下载下载地址：https://www.npmjs.com/get-npm安装完之后输入node -vnpm -v查看安装是否正常。设置镜像npm config edit将代码粘贴进去electron_mirror=https://npm.taobao.org/mirrors/electron/electron-builder-binaries_mirror=https://npm.taobao.org/mirrors/electron-builder-binaries/
复制链接

扫一扫

专栏目录