node创建html项目,Node.js使用Express创建Web项目详细教程

序:如果你还不知道Node.js是什么,那么你可以先看看这篇:Node.js 究竟是什么?或者任何关于它的介绍。

一、安装Node.js

1.进入Node.js官网下载并安装

38fcb18c492d5aa3cc4450e4141d960f.png

2.启动cmd输入命令查看node及npm版本

node -vnpm -v

c5c5aceaa29e3529fbf3f7f2974a28d9.png

npm是node完成安装后自带的包管理器

二、安装Express

express是node平台下最常用的web应用开发框架

1.全局安装express

npm install -g express

Win7环境全局安装在C:\Users\Administrator\AppData\Roaming\npm\node_modules文件夹下

2.全局安装express命令行工具

npm install -g express-generator

在最新的4.x版本中,命令行工具已经被独立出来

3.查看express版本

express -V

50e905d03d372a8bf22c6c1bfd3814ae.png

4.更新已安装的express

npm update -g express

三、使用Express创建项目

1.创建项目

express APP_NAME

express默认以jade作为模板引擎,模板文件为.jade类型;jade的语法与html有较大差异,对缩进也是要求严格的

18161f85643abc59c9bf10742eac14f3.png

2.以ejs作为模板引擎创建项目

express APP_NAME -e

在项目名称的后面添加 -e 那么创建出来的模板文件就是.ejs类型,语法是与html相同的

e08622561b6a8c04616ecc2eeb2abcd8.png

3.将ejs文件改为html

若希望模板文件的后缀为.html(通常只是为了看着更舒服),那么在手动将.ejs换成.html后,还需要对app.js文件进行设置

var ejs = require('ejs');

app.engine('.html', ejs.__express);

app.set('view engine', 'html'); //app.set('view engine', 'ejs');

原文件:

6f8ae205a8f3524415a57f8048692803.png

修改后:

7e9de814f12e79f4a5cf2a2ce4fbaa8a.png

4.安装依赖包

进入项目文件夹,执行:

npm install

下载package.json中记录的所有依赖包到node_modules文件夹

注意:更多npm命令,请查看npm常用命令集合

四、启动服务

1.启动

npm start

监听bin/www文件,默认端口为3000,可在www文件中更改

25e32402de4fd8e4f456fffb74380b0b.png

2.打开浏览器,输入localhost:3000

3b613da19b3904143dd9fabc13899066.png

3.自动重启服务

打开package.json可以看见,监听bin/www文件的命令是node

bca1032f9576b1f92d559903542d2945.png

使用node监听将会导致:每次修改代码后,需要手动重启服务,可以使用nodemon进行自动重启

npm install -g nodemon

同样可以使用下面的命令查看其版本

nodemon -v

将package.json文件中的代码修改为:

"start": "nodemon ./bin/www"

重新执行:

npm start

3e0500a6a00564caf2ccef192e305af2.png

接下来,就可以随心所欲的编码了...

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值