1、Node.js 安装配置
Node.js安装包及源码下载地址为:https://nodejs.org/en/download/。
本安装教程以node-v6.11.0-x64.msi版本为例。
安装方法
http://www.runoob.com/nodejs/nodejs-install-setup.html
Node.js默认安装目录为 "C:\Program Files\nodejs\"
1、在你项目的根目录下创建一个叫 server.js 的文件,并写入以下代码:
var http = require('http');
var fs = require('fs');
var url = require('url');
// 创建服务器
http.createServer( function (request, response) {
// 解析请求,包括文件名
var pathname = url.parse(request.url).pathname;
// 从文件系统中读取请求的文件内容
fs.readFile(pathname.substr(1), function (err, data) {
if (err) {
// HTTP 状态码: 404 : NOT FOUND
// Content Type: text/plain
response.setHeader('Content-Type', 'text/plain');
}else{
// HTTP 状态码: 200 : OK
// Content Type: text/plain
//response.writeHead(200, {'Content-Type': 'text/html'});
// 响应文件内容
response.setHeader('Content-Type', 'text/plain');
}
// 发送响应数据
response.end();
});
}).listen(7777);
// 控制台会输出以下信息
console.log('Server running at http://127.0.0.1:7777/');
例目录:C:\example_Code
命令:cd C:\example_Code---打开目录位置
命令:node server.js -执行文件起动文件(注意:端口是否被占用、如被占用无法执行)
Web 应用架构
1.HTTP 服务器架构(使用8081端口),创建 server.js 文件,代码如下所示
var http = require('http');
var fs = require('fs');
var url = require('url');
//创建服务器
http.createServer( function (request, response) {
// 解析请求,包括文件名
var pathname = url.parse(request.url).pathname;
//从文件系统中读取请求的文件内容
fs.readFile(pathname.substr(1), function (err, data) {
// 发送响应数据
response.end();
});
}).listen(7777);
// 控制台会输出以下信息
console.log('Server running at http://127.0.0.1:7777/');
2.目录下创建一个 index.htm 文件
<html>
<head>
<title>Sample Page</title>
</head>
<body>Hello World!</body>
</html>
3.执行 server.js 文件
$ node server.js
Server running at http://127.0.0.1:8081/
4、最后http://127.0.0.1:8081/index.htm 输出 Hello World!
如没有npm命令需要安装npm
1.安装npm install -g cnpm –registry=https://registry.npm.taobao.org
安装webpack
1.安装webpack命令如下
在终端中转到该文件夹后执行下述指令就可以完成安装
//全局安装Cnpm install -g webpack
//安装到你的项目目录
Cnpm install --save-dev webpack
1.找到项目文件夹使用下面密命打包
webpack js/router.js js/bundle.js
2、接下来我们使用以下命令来安装 css-loader 和 style-loader(全局安装需要参数 -g)
注意:加载CSS 需执行下面命
cnpm install css-loader style-loader
安装VUE项目步骤
我们首先,需要安装vue-cil。命令如下
npm install -g vue-cli
首先,我们在终端中把当前目录定位到你准备存放项目的地方。如我是准备放在~/Sites/MyWork/这个目录下面,那么我的命令如下:
cd ~/Sites/MyWork
进入到目录之后,我们按照下面的代码逐条输入,新建一个自己的vue项目
vue init webpack vuedemo
输入这个命令之后,会出现一些提示,是什么不用管,一直按回车即可
如上图所示,就说明我们的项目构建成功了。并且,给出了下面要执行的命令,我们来逐条执行:
cd vuedemo
cnpm install
npm install --registry=https://registry.npm.taobao.org
最后,执行下面一句,把项目跑起来
npm run dev
打包部署服务器
3.然后我就执行了npm run build 打包
服务器只要上传dist文件的代码即可
如:启用了ESLine来检查语法
在bulid文件下webpacj.base.conf.js中找到关于esline的loader 删除
配置文件
我们可以将一些编译选项放在配置文件中,以便于统一管理:
创建 webpack.config.js 文件,代码如下所示:
var webpack=require('webpack'); module.exports = { entry: "./runoob1.js", output: { path: __dirname, filename: "bundle.js" }, module: { loaders: [ { test: /\.css$/, loader: "style-loader!css-loader" } ] }, plugins:[ new webpack.BannerPlugin('菜鸟教程 webpack 实例') ] };