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

最新推荐文章于 2024-08-19 09:25:05 发布

机灵鹤

最新推荐文章于 2024-08-19 09:25:05 发布

阅读量918

点赞数

分类专栏： Electron-Vue 开发教程文章标签： nodejs vue npm Electron

本文链接：https://blog.csdn.net/wenxuhonghe/article/details/108131225

版权

Electron-Vue 开发教程专栏收录该内容

8 篇文章 3 订阅

订阅专栏

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

一、使用淘宝的 NPM 镜像

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

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

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

二、初始化项目

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

方法一：使用 `npm init`

新建一个空文件夹，然后打开命令行工具，在该文件夹中运行
```
npm init
```

设置好各种参数之后，会生成一个 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"
  }
}

默认创建出来的 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.js` 和 `index.html`

新建 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 导入。

新建 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>