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

生活知识 2023-03-13 20:28www.tongjingw.cn生活知识

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

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

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

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

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

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、新建一个文本文档。

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

<html>

<head>

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

</head>

<body>

<h1>hello，人生＜/h1>

</body>

<foot>

</foot>

</html>。

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

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

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