electron学习使用

最新推荐文章于 2024-05-16 11:00:00 发布

置顶 shawemou

最新推荐文章于 2024-05-16 11:00:00 发布

阅读量500

点赞数

文章标签： node.js vue.js electron

本文链接：https://blog.csdn.net/shawemou/article/details/109235649

版权

electron认识和学习

electron是基于nodejs使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序

学习历程

使用electron安装基础包；
仅依靠index.html和index.js使用electron；
electron整合element-ui进行打包；

一、使用electron安装基础包；

1,全局安装electron:

命令:npm install -g electron
使用electron --version 可以查询electron版本,因为打包使用的是electron–builder,所以electron包需要使用7.0.0以上的版本
在这里插入图片描述

2,全局安装electron-prebuilt :

cnpm install -g electron-prebuilt

3,全局安装 electron-packager 打包工具:

cnpm install -g electron-packager

4,全局安装electron-builder 打包工具:

cnpm install electron-builder -g
打包命令有两个electron-packager 和 electron-builder,经过网上查询资源,自己只使用了electron-builder,具体区别可以去搜索

5,全局安装 aser 打包工具:

cnpm install -g asar

二、使用electron做一个简单的demo–>electron_simpleDemo

1,初始化package.json

新建项目文件夹,进入项目文件夹,进入cmd,运行npm init
初始化完成后会生成package.json,里面新增electron的依赖,否则最终无法打包
“devDependencies”: {
“electron”: “10.1.4”
}

在这里插入图片描述

2,新增index.html index.js

index.html文件:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">

  <title>shawemouDemo</title>

  <!-- jquery的引用地址查询 https://www.bootcdn.cn/ -->
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.js"></script>

</head>

<body>
  <div>
		请输入<input type='text' id='input' value=''/>
		<button>弹框</button>
  </div>
</body>
<script>
	$("button").on("click",function(){
		alert($("#input").val())
	})
</script>

</html>

index.js文件:

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

let window = null

// Wait until the app is ready
app.once('ready', () => {
  // Create a new window
  window = new BrowserWindow({
    // Set the initial width to 800px
    width: 800,
    // Set the initial height to 600px
    height: 600,
    // Set the default background color of the window to match the CSS
    // background color of the page, this prevents any white flickering
    backgroundColor: "#D6D8DC",
    // Don't show the window until it's ready, this prevents any white flickering
    show: false
  })

  // Load a URL in the window to the local index.html path
  window.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:',
    slashes: true
  }))

  // Show window when page is ready
  window.once('ready-to-show', () => {
    window.show()
  })
})

最后文件结构:
在这里插入图片描述

3,演示

运行 "electron . "
在这里插入图片描述

4,打包

运行:" electron-builder --win —x64 "
在这里插入图片描述

5,github地址

https://github.com/shawemou/electron_simpleDemo

Clone this repository

git clone https://github.com/shawemou/electron_simpleDemo

Go into the repository

cd electron_simpleDemo

Install dependencies

npm install

Run the app

electron .

二、使用electron打包vue项目

关于vue-cli的技术不在这里讲解

1,将vue项目打包

打包成一个文件
在这里插入图片描述

2,打包文件放入electron_simpleDemo项目中,修改index.js

修改index.js文件,将引用的index.html修改为./qhconfig/index.html

  window.loadURL(url.format({
    pathname: path.join(__dirname, './qhconfig/index.html'),
    protocol: 'file:',
    slashes: true
  }))

3,演示

运行"electron ."
在这里插入图片描述

4,打包

运行:" electron-builder --win —x64 "
在这里插入图片描述

shawemou

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
electron学习使用

文章目录electron认识和学习学习历程一、使用electron安装基础包；1,全局安装electron:2,全局安装electron-prebuilt :3,全局安装 electron-packager 打包工具:4,全局安装electron-builder 打包工具:5,全局安装 aser 打包工具:二、使用electron做一个简单的demo-->electron_simpleDemo1,初始化package.json2,新增index.html index.js3,演示4,打包5,githu
复制链接

扫一扫