新建electron项目

最新推荐文章于 2024-02-20 09:00:00 发布

wx1458084829

最新推荐文章于 2024-02-20 09:00:00 发布

阅读量91

点赞数

分类专栏：前端文章标签： vue js

本文链接：https://blog.csdn.net/qq_28762305/article/details/118768385

版权

前端专栏收录该内容

9 篇文章 1 订阅

订阅专栏

新建electron项目

1.新建文件夹：

新建文件夹并且进入

2.初始化项目

cnpm init

3.修改package.json文件

{
  "name": "el_hello",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
      //启动配置
    "start": "electron ."
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^10.1.2",
    "electron-packager": "^15.1.0"
  }
}

4.新建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')
}

app.whenReady().then(createWindow)

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

6.运行

cnpm run start

7.打包

cnpm install electron-packager -g //全局安装打包工具

electron-packager . //最简单的打包命令

问题：打包工具下载包很慢

解决：

1.设置环境变量

ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/

wx1458084829

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
新建electron项目

新建electron项目1.新建文件夹：新建文件夹并且进入2.初始化项目cnpm init3.修改package.json文件{ "name": "el_hello", "version": "1.0.0", "description": "", "main": "main.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", //启动配置
复制链接

扫一扫

专栏目录