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）