vscode+nwjs开发环境配置

最新推荐文章于 2023-05-04 22:37:34 发布

yuer5531

最新推荐文章于 2023-05-04 22:37:34 发布

阅读量898

点赞数 1

本文链接：https://blog.csdn.net/yuer5531/article/details/114939904

版权

1、下载安装vscode

自行下载安装

2、下载nwjs sdk

https://nwjs.org.cn/download.html
选择带SDK的版本
在这里插入图片描述
在系统用户根目录下创建文件夹C:\Users\Administrator\.nwjs
将下载的sdk压缩包解压到该目录下，如下图

3、vscode安装debugger for NWjs插件

在这里插入图片描述

4、创建nwjs项目

4.1、创建package.json文件

{
  "name": "测试",
  "version": "1.0.0",
  "main": "index.html",
  "chromium-args": "--disable-web-security --user-data-dir=Data --disable-devtools",
  "window": {
	"fullscreen": true,
	"toolbar": false,
	"kiosk": true,
    "frame": false,
    "width": 1920,
    "height": 1080,
    "min_width": 1920,
    "min_height": 1080,
    "max_width": 1920,
    "max_height": 1080
  },
  "webkit": {
    "plugin": true
  }
}

4.1、创建入口网页文件index.html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		
		<title></title>
		<script>
			
		</script>
	</head>

	<body>
		<div class="container" style="width: 400px;height: 400px;background-color: blue;">
			Hello NWjs!!!
		</div>
	</body>

</html>

5、运行

点击vscode菜单view ->run
在这里插入图片描述
点击 Run and Debug，弹窗Select Environment 选择NWjs

自动生成launch.json文件，无需修改，点击Start Debugging按钮运行

运行效果

当有代码修改时，点击Restart按钮即可刷新
在这里插入图片描述
例如把div背景改成红色：

yuer5531

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vscode+nwjs开发环境配置

1、下载安装vscode自行下载安装2、下载nwjs sdkhttps://nwjs.org.cn/download.html选择带SDK的版本在系统用户根目录下创建文件夹C:\Users\Administrator.nwjs将下载的sdk压缩包解压到该目录下，如下图3、vscode安装debugger for NWjs插件4、创建nwjs项目4.1、创建package.json文件{ "name": "测试", "version": "1.0.0", "main":
复制链接

扫一扫