用nw.js构建node项目

在网上找了很多nw.js快速开始的教程,很大一部分都是通过最基本的index.html和package.json来访问“hello world”页面。这里我简单得介绍下在“hello world”基础上更进一步的过程。

(1)下载nw.js

登陆官网nwjs.io,有normal和SDK两个下载版本。在开发中,我们选择SDK的版本,因为它有开发者调试的功能。


下载完毕后解压,我们就会看到nw.js默认的目录

用nw.js构建node项目_第1张图片

新建app文件夹,我们的代码都会放在这

(2)简单的hello world

在app文件夹中新建index.html

用nw.js构建node项目_第2张图片

新建package.json,其中“name”和“mian”都是必须的,项目启动时,首先会进入package.json查看配置信息。name表示客户端的名字,必须唯一;mian是初始页面的路径

用nw.js构建node项目_第3张图片

拖拽app文件夹到nw.exe运行文件

用nw.js构建node项目_第4张图片

用nw.js构建node项目_第5张图片

打包的过程不再多说,网上有很多教程:压缩成app.nw,然后执行copy /b nw.exe+app.nw nw-demo.exe

(3)构建node项目

命令行进入app文件夹,执行 npm install express --save,安装express,生成node的依赖包node-modules,如图

用nw.js构建node项目_第6张图片

继续新建app.js(node项目启动文件),public(静态资源)等等,这里只是简单演示。有几个步骤:

1. 把index.html移到public文件夹下

2. 修改package.json中的“mian”为 "public/index.html"

目录结构如下:

用nw.js构建node项目_第7张图片

再次拖拽运行,没有问题

(4)编写app.js,开启服务器;编写index.html发送请求

在package.json中添加  "node-main":"app.js"

用nw.js构建node项目_第8张图片


用nw.js构建node项目_第9张图片

再次拖拽运行,右击开启开发者模式,点击“get”,响应成功

用nw.js构建node项目_第10张图片

你可能感兴趣的:(用nw.js构建node项目)