nodejs学习——http-server快速搭建前端应用
nodejs现在非常火爆,基于nodejs搭建前端应用几乎成为主流。本文将简单介绍如何基于nodejs快速搭建前端应用。
安装nodejs
首先去官网下载nodejs安装包:https://nodejs.org/en/
windows下直接双击安装程序进行安装
Linux下首先解压安装包:
tar -zxvf node-v4.2.1-linux-x64.tar.gz
然后设置全局命令:
ln -s /home/tools/node-v4.2.1-linux-x64/bin/node /usr/local/bin/node
ln -s /home/tools/node-v4.2.1-linux-x64/bin/npm /usr/local/bin/npm
安装完成后,输入命令 node -v 可查看node版本,输入 npm -v可查看npm版本
设置代理
npm config set proxy http://proxyhk.huawei.com:8080/
npm config set https-proxy http://username:password@proxyhk.huawei.com:8080/ username和password为登录桌面云时输入的用户名和密码
创建前端工程
这里我没有使用nodejs自带的express框架。
在D:\workspace目录下创建文件夹nodejs-demo,即为我们的工程。
切换到工程目录下:cd nodejs-demo
在目录下新建文件package.json 该文件为npm的配置文件,内容如下:
|
||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
name表示项目名称
version表示项目版本
devDependencies表示依赖的模块,代码中给出的表示该项目需要grunt及其插件。关于grunt会在后面的博客中讲。
执行npm install 即可安装这些模块。
然后在nodejs-demo文件夹下,可以看到自动生成了一个node_modules文件夹,该文件夹里存放的就是刚刚安装的grunt相关模块。
在nodejs-demo文件夹中,新建src文件夹,我们将所有的代码都写在src文件夹中。
在src文件夹下新建index.html文件,这里只用一个最简单的html文件举例。
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
接下来,我们需要启动一个服务器来运行该工程。
相比较nodejs推荐的express框架,可以使用更轻量级的http-server。
http-server是一个服务搭建工具,也是基于nodejs,和express相比,更轻了,完全可以不用安装到项目的目录中。
安装http-server:
npm install http-server -g 如此即可全局安装http-server
接下来,可以在工程目录下使用命令
http-server -a ip -p port 启动服务器
-a指定了ip, -p指定了端口 如果不写这两个参数,默认会在localhost:8080启动服务。
关于http-server更详细的介绍,可以参见官网:https://www.npmjs.com/package/http-server
启动服务后,在浏览器中输入url:
http://localhost:8080/src/index.html 即可访问刚刚写的index.html文件。
可以看到,该项目比较轻量级,配置和部署都较为简易。
而且更为重要的是,这是一个纯粹的前端工程,和我们在eclipse中创建web工程有很大区别。
这种纯粹的前端工程,与前后台分离的设计理念相符合。
如此,我们基于nodejs搭建了一个最简单的前端工程。但是,仅仅这样还不够,在后面的博客中,我们会讲述如何使用一些工具来管理我们的前端工程。
- 点赞
- 收藏
- 关注作者
评论(0)