electron学习使用

喜欢ヅ旅行 2022-12-17 08:46 174阅读 0赞

### 文章目录 ###

*  electron认识和学习
 *   *  学习历程
     *  一、使用electron安装基础包；
     *   *  1,全局安装electron:
         *  2,全局安装electron-prebuilt :
         *  3,全局安装 electron-packager 打包工具:
         *  4,全局安装electron-builder 打包工具:
         *  5,全局安装 aser 打包工具:
     *  二、使用electron做一个简单的demo-->electron\_simpleDemo
     *   *  1,初始化package.json
         *  2,新增index.html index.js
         *  3,演示
         *  4,打包
         *  5,github地址
         *   *  Clone this repository
             *  Go into the repository
             *  Install dependencies
             *  Run the app
     *  二、使用electron打包vue项目
     *  1,将vue项目打包
     *  2,打包文件放入electron\_simpleDemo项目中,修改index.js
     *  3,演示
     *  4,打包

# electron认识和学习 #

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

## 学习历程 ##

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

## 一、使用electron安装基础包； ##

### 1,全局安装electron: ###

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

### 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”  
\}

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoYXdlbW91_size_16_color_FFFFFF_t_70_pic_left]

### 2,新增index.html index.js ###

index.html文件:

<!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
    
      <title>shawemouDemo</title>
    
      
      <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()
      })
    })

最后文件结构:  
![在这里插入图片描述][20201023110521910.png_pic_left]

### 3,演示 ###

运行 "electron . "  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoYXdlbW91_size_16_color_FFFFFF_t_70_pic_left 1]

### 4,打包 ###

运行:" electron-builder --win —x64 "  
![在这里插入图片描述][20201023131858330.png_pic_left]  
![在这里插入图片描述][20201023131925530.png_pic_left]

### 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项目打包 ##

打包成一个文件  
![在这里插入图片描述][20201023133058948.png_pic_left]

## 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 ."  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoYXdlbW91_size_16_color_FFFFFF_t_70_pic_left 2]

## 4,打包 ##

运行:" electron-builder --win —x64 "  
![在这里插入图片描述][20201023134024500.png_pic_left]

[2020102309395397.png_pic_left]: /images/20221122/aa36243255ab4768ae413b7b31a311c2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoYXdlbW91_size_16_color_FFFFFF_t_70_pic_left]: /images/20221122/bd007dec627f4c98ae74386dafac1c9c.png
[20201023110521910.png_pic_left]: /images/20221122/8aadaa2c46a64b34b5d7c20143ef9fd5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoYXdlbW91_size_16_color_FFFFFF_t_70_pic_left 1]: /images/20221122/5810e082903f49e78ae5581b5887fdb5.png
[20201023131858330.png_pic_left]: /images/20221122/e3c26c9787b54275bd0b419d65b581f1.png
[20201023131925530.png_pic_left]: /images/20221122/7fc74ca596334e45b6483a249729cbae.png
[20201023133058948.png_pic_left]: /images/20221122/d5a17a8469414fc294382c4a4b16d4e8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoYXdlbW91_size_16_color_FFFFFF_t_70_pic_left 2]: /images/20221122/8901449403b54d23b560e85dcce158bf.png
[20201023134024500.png_pic_left]: /images/20221122/a52240828e8145d5a59b35bf1e23c2b8.png