electron基础环境的搭建及项目的创建

雨点打透心脏的1/2处 2023-03-13 11:34 0阅读 0赞

# 环境 #

#### 安装node ####

# 全局安装electron #

*  `npm install -g electron`

--------------------

# 克隆远程仓库 #

#### 克隆这仓库 ####

`git clone https://github.com/electron/electron-quick-start`

#### 进入仓库 ####

`cd electron-quick-start`

#### 安装依赖库 ####

`npm install`

##### 运行应用 #####

`npm start`

--------------------

# 手动创建 #

#### 新建文件夹 ####

`mkdir electron-demo`

#### 安装依赖 ####

*  `npm install electron --save-dev`

#### 新建文件 ####

*  index.html
    
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Document</title>
        </head>
        <body>
            <h2>hello world</h2>
        </body>
        </html>
 *  main.js
    
        var electron = require('electron')  //引入electron模块
        
        var app = electron.app   // 创建electron引用
        
        var BrowserWindow = electron.BrowserWindow;  //创建窗口引用
        
        var mainWindow = null ;  //声明要打开的主窗口
        
        // 监听应用准备完成的事件
        app.on('ready', () => { 
            mainWindow = new BrowserWindow({ width:400, height:400})   //设置打开的窗口大小
        
            mainWindow.loadFile('index.html')  //加载那个页面
        
            //监听关闭事件，把主窗口设置为null
            mainWindow.on('closed', () => { 
                mainWindow = null
            })
        
        })
        
        //监听所有窗口关闭的事件 
        app.on('window-all-closed', function () { 
            if (process.platform !== 'darwin') { 
                app.quit(); 
            }
        })

#### 初始化package.json文件 ####

*  `npm init --yes`

#### 运行 ####

*  `electron .`

--------------------

# electron-forge 脚手架搭建 #

#### 安装electron-forge ####

*  `npm install -g electron-forge`

#### 初始化项目 ####

*  `electron-forge init my-new-app`

此处到最后会一直在下载中，可以使用ctrl+c终止掉，然后进入目录，使用cnpm或者yarn安装

#### 进入目录 ####