【Electron-Vue】入门学习笔记之三:创建自己的第一个 Electron 项目

上一节《搭建 Node.js 开发环境》我们安装了 Node.js 环境。
这一节,我会带大家开发自己的第一个 Electron 项目。

一、使用 淘宝 的 NPM 镜像

首先,我们需要安装 Electron 模块,但是由于 npm 默认是从国外的服务器上下载,网络不是那么稳定,所以,我们先安装一下 cnpm ,从国内的淘宝镜像下载,会稳定一些。

npm install -g cnpm --registry=https://registry.npm.taobao.org

关于 npmcnpm 的区别,可以参考文章《NPM 和 CNPM 的使用及区别》。

二、初始化项目

有两种方法,可以使用 npm init 命令生成项目初始化的文件,也可以直接在 GitHub 主页下载示例程序代码。

方法一:使用 npm init

  1. 新建一个空文件夹,然后打开命令行工具,在该文件夹中运行
    npm init
    
  2. 设置好各种参数之后,会生成一个 package.json 文件
    {
      "name": "first_electron",
      "version": "0.0.1",
      "description": "",
      "main": "main.js",
      "scripts": {
    	"start": "electron ."
      },
      "author": "samrt crane",
      "license": "ISC",
      "devDependencies": {
    	"electron": "^9.2.0"
      }
    }
    
  3. 默认创建出来的 package.json 文件内容可能不是这样的,主要修改一下这几个参数。
    {
      "name": "your-app",
      "version": "0.1.0",
      "main": "main.js",
      "scripts": {
    	"start": "node ."
      }
    }
    

方法二:从 github 下载示例

打开下面的地址,下载 electron-quick-start 项目源码。

https://github.com/electron/electron-quick-start

下载好后,将代码文件解压(如果下载的是压缩包格式)到自己的项目文件夹中。

三、安装 electron,把它作为 app 中的开发依赖项。

npm install --save-dev electron

这个用的是国外的源,网络特别不稳定,很有可能会失败(我这边就死活也安不上)。

解决方法:可以换成使用 cnpm 来代替 npm 进行安装。

cnpm install --save-dev electron

四、设置项目文件 main.jsindex.html

  1. 新建 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()
    }
    
    // This method will be called when Electron has finished
    // initialization and is ready to create browser windows.
    // 部分 API 在 ready 事件触发后才能使用。
    app.whenReady().then(createWindow)
    
    // Quit when all windows are closed.
    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()
      }
    })
    
    // In this file you can include the rest of your app's specific main process
    // code. 也可以拆分成几个文件,然后用 require 导入。
    
    
  2. 新建 index.html

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title>Hello World!</title>
        <!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag -->
        <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
      </head>
      <body>
        <h1>Hello World!</h1>
        We are using node <script>document.write(process.versions.node)</script>,
        Chrome <script>document.write(process.versions.chrome)</script>,
        and Electron <script>document.write(process.versions.electron)</script>.
      </body>
    </html>
    

当然如果你使用的是 github 中下载的示例代码,可以直接在对应文件中修改

五、启动运行

npm start

运行效果图:
在这里插入图片描述

至此,我们的第一个 Electron 程序已经创建并可以成功运行了。

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 撸撸猫 设计师:设计师小姐姐 返回首页