vscode新建html文件,前端可以做桌面软件开发吗?

当然是可以的vscode新建html,比较流行的就是electron,借助于node进行打包,将前端转化为桌面软件,下面我简单介绍一下electron是打包前端为桌面软件的,感兴趣的朋友可以尝试一下:

vscode新建html文件,前端可以做桌面软件开发吗?

搭建node环境这个直接到node官网下载即可,windows环境下也就是exe安装包,双击便可安装,安装完成后,这里需要将node、npm这些常用命令添加到环境变量(也就是node的安装目录),后面使用起来也会非常方便:

vscode新建html文件,前端可以做桌面软件开发吗?

vscode新建html文件,前端可以做桌面软件开发吗?

安装electronnode安装完成后,这里还需要安装electron,打包的时候要用到,直接在cmd窗口输入命令“npm install electron electron-packager”即可,如下,如果下载过程比较慢,可以更换一下npm源:

vscode新建html文件,前端可以做桌面软件开发吗?

vscode新建html文件,前端可以做桌面软件开发吗?

打包软件01、打包目录及打包所需文件

vscode新建html文件,前端可以做桌面软件开发吗?

一切准备就绪后,我们就可以直接开始打包前端软件了,新建一个文件夹,将需要打包的前端文件放进去,同时创建package.json和main.js这2个文件,目录结构如下:

vscode新建html文件,前端可以做桌面软件开发吗?

02、配置打包所需文件

package.json配置如下,这主要指明应用名称、版本号以及打包配置文件:

main.js配置如下,这里主要指明打包的具体过程,重点是需要打包的html文件,网上相关配置非常多,可以做适当调整和补充:

03、打包软件

打开cmd,cd切换到打包目录,然后直接运行“electron-packager . APP –win –out AppDir –arch=x64 –electron-version=3.0.10 –overwrite”命令即可,这里主要是指明平台、输出目录、位数、版本号等:

打包完成,即可在APPDir输出目录看到打包的exe程序,双击便可正常运行,本质其实就是嵌套了一个浏览器内核:

至此,我们就完成了将前端网页打包为桌面软件。总的来说,整个过程非常简单,借助于electron我们可以快速完成打包软件,当然,你也可以使用nwjs,网上也有相关资料和教程,介绍的非常详细,感兴趣的话,可以搜一下,希望以上分享的内容能对你有所帮助吧,也欢迎大家评论、留言进行补充。

如何创建一个html文件?

1、新建一个文本文档。

vscode新建html文件,前端可以做桌面软件开发吗?

2、打开文本文档后,输入

vscode新建html文件,前端可以做桌面软件开发吗?

<html>

vscode新建html文件,前端可以做桌面软件开发吗?

<head>

vscode新建html文件,前端可以做桌面软件开发吗?

<title>这是一个网页</title>

vscode新建html文件,前端可以做桌面软件开发吗?

</head>

<body>

<h1>hello,人生</h1>

<p> <font size=”8″face=”Verdana”>寂寞如雪</foot></p>

</body>

<foot>

</foot>

</html>。

3、输入段代码后,点击保存,保存类型设置为所有文件,文件名保存为test.html。

4、点击保存后,一个html文件就做好了。

5、点击就可以打开html文件了。

版权声明:本站部分文章来源互联网,主要目的在于分享信息,版权归原作者所有,本站不拥有所有权,不承担相关法律责任,如有侵权请联系我们,本站将立刻删除。
(0)
上一篇 2022年5月26日 上午10:11
下一篇 2022年5月26日 上午10:12

相关推荐