创建electron项目的三种方式_electron 创建项目__陌子曦的博客-程序员宝宝

技术标签: electron  npm  macos  

electron是什么?

  • Electron 是一个能让你使用 JavaScript, HTML 和 CSS 来创建桌面应用程序的框架。

学习electron前提条件

  • 需掌握 html + css + javascript
  • 了解/会使用基础node脚本(npm的使用)
  • 电脑安装有node 建议您安装最新可用的 LTS 或 Current 版本

前期准备,已经安装npm,node请忽略

1. Mac  升级node 到最新版本 https://blog.csdn.net/ssjdoudou/article/details/106175320
2. Mac 安装cnpm   sudo npm install -g cnpm --registry=https://registry.npm.taobao.org
3. Mac 安装electron    sudo cnpm install -g electron
4. 查看版本号。  electron -v
5.mac安装yarn:sudo cnpm install -g yarn

第一种方式:

采用官网快速开始项目:https://github.com/electron/electron-quick-start

# Clone this repository
git clone https://github.com/electron/electron-quick-start
# Go into the repository
cd electron-quick-start
# Install dependencies
npm install
# Run the app
npm start

第二种方式:

采用官网脚手架方式,功能更加全面:https://www.electronforge.io/?utm_source=default_app

npx [email protected] my-app
或者
yarn create electron-app my-app

cd my-app
npm start

打包方式参考:electron项目打包成dmg_陌子曦的专栏-程序员宝宝

第三种方式:手动创建项目 

1.创建工程名称:electron-manual-app
2.在工程中创建主进程main.js,渲染进程index.html
3.生成package.json命令: npm init —yes
4.项目安装electron:cnpm i electron —save -dev
5.启动工程命令: electron .

Javascript 代码检测工具eslint:

全局安装命令:sudo cnpm install -g eslint
安装完成之后,在项目中执行eslint —init

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/QCIWYY/article/details/122371590

智能推荐

JS相关_啊姆架构狮的博客-程序员宝宝

JS语法:浮点数是二进制算法,能精确表示分数1/2,1/16等,所以(0.3-0.2) != (0.2-0.1)。(解决方法:*10再/10)标签语句:给break和continue增加标签,可以实现类似goto的效果。可以给函数定义属性,当函数需要一个"静态变量",可以给函数一个属性为该变量,这样就避免了杂乱无章的全局变量给sort()传一个函数参数:function create...

几个非常适合新手练习python爬虫的网页,总有一款能搞定!_Python玩家的博客-程序员宝宝_爬虫练习网址

几个非常适合新手练习python爬虫的网页,总有一款能搞定! 话不多说,直接干货了!头条图集:抓包获取json数据 打开今日头条主页,搜索小姐姐,或者其他你感兴趣的内容,然后点击图集动态加载的json数据就出来了,没有反爬,注意的是,如果不想去内容里面抓图片的话,可以只抓缩略图,就是这个页面显示的图片,它在json数据中的image_list中,注意,将url中的list换成o...

TensorBoard_tdev的博客-程序员宝宝

文章目录安装 TensorBoard安装 TensorBoard(base) $ sudo pip install tensorboard==1.15.0tensorflow 1.14.0 requires tensorboard<1.15.0,>=1.14.0, but you have tensorboard 1.15.0 which is incompatible.启动,并修改 tensorboard 端口需要进入 logs 所在根目录tensorboard --lo

谈谈RGB、YUY2、YUYV、YVYU、UYVY、AYUV_lamdoc的博客-程序员宝宝

计算机彩色显示器显示色彩的原理与彩色电视机一样,都是采用R(Red)、G(Green)、B(Blue)相加混色的原理:通过发射出三种不同强度的电子束,使屏幕内侧覆盖的红、绿、蓝磷光材料发光而产生色彩。这种色彩的表示方法称为RGB色彩空间表示(它也是多媒体计算机技术中用得最多的一种色彩空间表示方法)。根据三基色原理,任意一种色光F都可以用不同分量的R、G、B三色相加混合而成。F =

笔记本 无线网联网 win10系统 ,台式机木有无线网卡,通过一根网线连接两台电脑,使台式机联网。..._dijuan6625的博客-程序员宝宝

第一步,用网线将笔记本和台式机相连,打开Win10更改适配器选项,如下第二步设置笔记本和台式机的IPv4地址都为自动获取,我的笔记本上是通过“以太网”和台式机连接的,其实就是本地连接。第三步,右键WLAN,点击属性,选择共享选项卡,勾选允许其他网络用户通过此计算机的Internet连接来连接。...

如何快速成为一个游戏测试工程师(配教程)_千锋python和唐唐的博客-程序员宝宝_游戏测试教程

如何快速融入游戏软件测试行业,成为一个游戏测试工程师?其实和软件测试差别不大,总结一句话就是:掌握扎实的理论基础,加入一个成熟的游戏测试团队,了解广泛的游戏常识以及测试人员对缺陷的敏感度。实战教程也在文末给大家整理好了!一、掌握扎实的理论基础不管是普通的软件测试还是游戏测试,测试流程基本上是一致的,那就是测试计划、测试用例设计、测试搭建及执行、缺陷、修复及回归、验收测试(内测、公测等)、上线,最后完成一份项目总结报告。通过上图可见,游戏软件测试的测试方法、测试策略与普通的软件测试差别不.

随便推点

OBS二次开发随记_一名工程师的博客-程序员宝宝_obs二开

最近有OBS开发的需求, 难免需要阅读理解源码. 所幸不需要过多的去阅读ffmpeg的代码, 这部分我也不会~主要还是QT的代码. 记录下OBS源设置过程中几个重要的类.OBSBasicSourceSelectOBSBasicPropertiesOBSPropertiesView这三个类在代码里就完成了对OBS源的添加设置等工作. 不过还有一些辅助的类, 主要是操作配置

vue点击元素该元素高亮显示_竹叶轻拂水的博客-程序员宝宝

<!-- 利用绑定class属性的方法,来判断当前点击的索引是哪个 --><li v-for="(item,index) in classInfo" :key="index" :class="{active: isActive==index}" @click="isActive=index"> {{item.value}}</li>...

error: two or more data types in declaration specifiers原因及解决方法_Joe_vv的博客-程序员宝宝_c语言erro two or more

编译时报错:error: two or more data types in declaration specifiers原因可能有两个:1. 少了一个分号";",比如定义一个结构体时,在最后忘了加分号。2. 重复定义,比如:a.h文件中有如下定义:#define bool charb.h文件中有如下定义:typedef char bool;

c语言:输入两个正整数m和n,求其最大公约数和最小公倍数_weixin_34032792的博客-程序员宝宝

输入两个正整数m和n,求其最大公约数和最小公倍数。解:程序:#include <stdio.h>int main(){ int num1, num2, t,p; printf("请输入两个正整数:"); scanf("%d,%d", &num1, &num2);//7,8 p = num1*num2; while (t = num1%num2...

Java BigDecimal 和Mysql 加减乘除,求余,求平均值,查询不等于某数值_小白鼠丶的博客-程序员宝宝_bigdecimal计算结果不是数字

BigDecimal直接用数字转换为BigDecimal时会出现不精确的数值:BigDecimal e = new BigDecimal(2.2); System.out.println("e:"+e); BigDecimal f = new BigDecimal(3.32); System....

文件上传获取路径显示c:\fakepath\...解决办法_没用の阿豪的博客-程序员宝宝_c:\fakepath

最近再做一个文件上传的功能,突然发现用AJAX上传时 文件路径变成了c:\fakepath\...最后实在没办法了找到如下解决办法 暂时解决了问题在页面添加隐藏表单,ajax提交完成时提交隐藏表单,并刷新指定的iframe实现页面不刷新完成文件提交html<form hidden="hidden" method="post" enctype="multipart/form-..._1671465600

推荐文章

热门文章

相关标签