设为首页收藏本站
天气与日历 切换到窄版

 找回密码
 立即注册

QQ登录

只需一步，快速开始

限时开通VIP永久会员，可免费下载所有附件
帆帆资源网»首页 › 编程教程 › 编程教程 › 安装使用electron
返回列表 发新帖
查看: 574|回复: 0

[Electron+VUE教程] 安装使用electron

[复制链接]
帆帆资源网

3188

主题

4

回帖

3290

积分

管理员

积分
3290
发表于 2024-2-27 10:12:16 | 显示全部楼层 |阅读模式
安装使用electron
一、安装node和npm

运行cmd查看是否安装及版本号

  1. npm -v
  2. node -v
复制代码

二、安装electron

npm直接安装会报错缺少什么文件，使用cnpm进行安装

直接安装cnmp后，再用cnmp命令安装可能会报错Error: Cannot find module ‘node:util’

原因是npm版本与cnpm版本，先卸载再指定版本安装

  1. // 卸载原先版本
  2. npm uninstall cnpm

  4. // 安装指定版本
  5. npm install -g cnpm@6.0.0 --registry=https://registry.npm.taobao.org

  7. // 查看安装版本
  8. cnpm -v

  10. // 全局安装electron
  11. cnpm install -g electron

  13. // 查看electron版本
  14. electron -v
复制代码
三、安装打包输出工具


  1. cnpm install -g electron-packager
复制代码
四、安装electron客户端

打开淘宝镜像网站链接https://npm.taobao.org/mirrors/electron/​​

找到对应版本的压缩包进行下载并解压


五、创建electron应用

该应用文件夹包含三个文件


package.json文件

  1. {
  2.     "name": "medical",
  3.     "version": "0.1.0",
  4.     "main": "main.js"
  5. }
复制代码

main.js文件

  1. var electron = require("electron");
  2. var app = electron.app; // 控制应用生命周期的模块。
  3. var BrowserWindow = electron.BrowserWindow; // 创建原生浏览器窗口的模块
  4. // 保持一个对于 window 对象的全局引用，不然，当 JavaScript 被 GC，
  5. // window 会被自动地关闭
  6. var mainWindow = null;
  7. // 当所有窗口被关闭了，退出。
  8. app.on("window-all-closed", function () {
  9.   // 在 OS X 上，通常用户在明确地按下 Cmd + Q 之前
  10.   // 应用会保持活动状态
  11.   if (process.platform != "darwin") {
  12.     app.quit();
  13.   }
  14. });
  15. // 当 Electron 完成了初始化并且准备创建浏览器窗口的时候
  16. // 这个方法就被调用
  17. app.on("ready", function () {
  18.   // 创建浏览器窗口。
  19.   mainWindow = new BrowserWindow({ width: 800, height: 600 });
  20.   // 加载应用的 index.html
  21.   mainWindow.loadURL("file://" + __dirname + "/index.html");
  22.   // 打开开发工具
  23.   mainWindow.openDevTools();
  24.   // 当 window 被关闭，这个事件会被发出
  25.   mainWindow.on("closed", function () {
  26.     // 取消引用 window 对象，如果你的应用支持多窗口的话，
  27.     // 通常会把多个 window 对象存放在一个数组里面，
  28.     // 但这次不是。
  29.     mainWindow = null;
  30.   });
  31. });
复制代码

index.html文件

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>Hello World!</title>
  5. </head>
  6. <body>
  7.     <h1>Hello World!</h1>
  8.     We are using io.js <script>document.write(process.version)</script>
  9.     and Electron <script>document.write(process.versions['electron'])</script>.
  10. </body>
  11. </html>
复制代码

六、运行应用

cmd打开该文件所在目录，输命令electron .即可运行

  1. electron .
复制代码


或者找到electron.exe文件路径，后面加空格再输入应用路径即可运行


七、electron与vue的结合使用

将vue文件打包后替换掉原先的index.html


安装, 文件, electron, 版本, 应用

相关帖子

扫码关注微信公众号，及时获取最新资源信息！【下载附件优惠：VIP会员5折；永久VIP免费】
回复

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

免责声明：
1、本站提供的所有资源仅供参考学习使用，版权归原著所有，禁止下载本站资源参与商业和非法行为，请在24小时之内自行删除！
2、本站所有内容均由互联网收集整理、网友上传，并且以计算机技术研究交流为目的，仅供大家参考、学习，请勿任何商业目的与商业用途。
3、若您需要商业运营或用于其他商业活动，请您购买正版授权并合法使用。
4、论坛的所有内容都不保证其准确性，完整性，有效性，由于源码具有复制性，一经售出，概不退换。阅读本站内容因误导等因素而造成的损失本站不承担连带责任。
5、用户使用本网站必须遵守适用的法律法规,对于用户违法使用本站非法运营而引起的一切责任，由用户自行承担
6、本站所有资源来自互联网转载，版权归原著所有，用户访问和使用本站的条件是必须接受本站“免责声明”，如果不遵守，请勿访问或使用本网站
7、本站使用者因为违反本声明的规定而触犯中华人民共和国法律的，一切后果自己负责，本站不承担任何责任。
8、凡以任何方式登陆本网站或直接、间接使用本网站资料者，视为自愿接受本网站声明的约束。
9、本站以《2013 中华人民共和国计算机软件保护条例》第二章 “软件著作权” 第十七条为原则：为了学习和研究软件内含的设计思想和原理，通过安装、显示、传输或者存储软件等方式使用软件的，可以不经软件著作权人许可，不向其支付报酬。若有学员需要商用本站资源，请务必联系版权方购买正版授权！
10、本网站如无意中侵犯了某个企业或个人的知识产权，请来信【站长信箱312337667@qq.com】告之，本站将立即删除。
郑重声明：
本站所有资源仅供用户本地电脑学习源代码的内含设计思想和原理，禁止任何其他用途！
本站所有资源、教程来自互联网转载，仅供学习交流，不得商业运营资源，不确保资源完整性，图片和资源仅供参考，不提供任何技术服务。
本站资源仅供本地编辑研究学习参考，禁止未经资源商正版授权参与任何商业行为，违法行为！如需商业请购买各资源商正版授权
本站仅收集资源，提供用户自学研究使用，本站不存在私自接受协助用户架设游戏或资源，非法运营资源行为。
快速回复 返回顶部 返回列表