一、使用webstorm编辑器创建一个简单的nodejs服务器（打开一个进程）
//引入http模块
var http = require('http');
//调用http的接口创建服务器,回调——>异步(先打印22222222，再在控制台打印1111111);
var server = http.createServer(function(req,res){ //req:request浏览器提交给服务器相关 res:response;服务器到浏览器
console.log(1111111);
//设置编码格式：
res.write("<head><meta charset='utf-8'/></head>");
res.end();
})
console.log(22222222);
server.listen(8787); //8787：表示端口号 ，在浏览器地址栏输入 http://localhost:8787 运行
服务器设置编码格式的语句有<font color="red">三种</font>：
// res.write("<head><meta charset='utf-8'/></head>");
// res.setHeader("Content-type","text/html;charset=utf8");
// res.writeHeader(200,{"Content-type":"text/html;charset=utf8"}); //200是状态码
如何关闭node进程
先在终端查看进程：
lsof -i tcp:8787
图片.png
PID栏就表示我们正在运行的进程，node进程PID是891
在终端输入命令
kill 891
就关闭了node进程
<font color="red">注：</font>如果同时运行多个程序。每个程序端口号必须不同，不然会报错，因为一个端口号只能运行一个程序，下面是报错的内容
图片.png
nodejs一个home.js文件引入另一个mytestjs.js文件后，不能直接调用mytestjs.js文件里面的函数或者变量
home.js引入mytest.js文件
//必须通过require语句引入
var test = require("./mytestjs.js"); //必须加./
//调用mytestjs.js文件里地myFn函数
test.myFn();
注：testjs.js里面只能写命名函数
var myFn = function(){
console.log("我是myFN函数");
}
var a = "你好";
//导出变量或者函数，被引用的文件智能通过
module.exports = {
myFn:myFn,
a:a
}
打开webstorm的Terminal终端，将commonfn文件夹拖过去，再输入npm init初始化，一直Enter，会自动生成package.json配置文件，如下图所示
图片.png
==package.json配置文件里面的字段全解链接==：
http://blog.csdn.net/woxueliuyun/article/details/39294375
<font color="purple">单独安装某个插件</font>
比如：安装cookie
npm install cookie
图片.png
卸载cookie
npm uninstall cookie
图片.png
<font color="purple">一步安装项目中所有的插件</font>
1、终端输入命令 npm init ，自动在项目下生成package.json文件
2、终端命令：npm install
会把我们所在目录下项目下的package.json里面需要的插件自动全部下载下来
图片.png
<font color="green">使用npm安装vue</font>
sudo npm install --global vue-cli
使用npm安装vue脚手架cli ，拥有vue指令
vue -V 查看vue版本号
vue init webpack vuetest 创建一个基于webpack模板的新项目
图片.png
会自动生成一个vuetest文件夹以及里面的文件
图片.png
如果文件下载速度过慢，我们可以进入webstorm将node_modules设置为不扫描，减少扫描时间，如下：
图片.png
终端运行 npm run dev ，运行"npm run dev"的时候执行的是build/build.js文件
会得到一个地址
图片.png
将这个地址在浏览器运行
图片.png
webpack打包
全局安装webpack：
npm install webpack -g
<font color="red">js文件打包</font>
1.修改webpack.config.js
module.exports = {
//输入文件：当前执行文件的路径/app/index.js(单入口)（待编译）
entry:__dirname+"/app/index.js",
//输出文件：（已编译）
output:{
path:__dirname+"/build",
filename:"bundle.js"
},
//监视
watch:true
};
2.新建两个文件：
==app文件== 待编译
==build文件== 已编译
在webpack路径下：终端输入webpack 目的将输入文件打包到build下
打包成功会在build文件夹下生成一个bundle.js，然后再单入口（index.html）文件里面引入bundle.js就可以
3.index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="bundle.js"></script>
</head>
<body>
</body>
</html>
4.主入口文件index.js
console.log("我是index.js文件");
require('./index.css');
var res = require("./module1.js");
console.log(res.a);
res.fn();
<font color="red">css样式打包</font>：
1.安装css-loader，style-loader
sudo npm install css-loader style-loader --save
2.index.css
body{
width: 100%;
background-color: greenyellow;
}
3.index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="bundle.js"></script>
</head>
<body>
</body>
</html>
2.修改webpack.config.js
module.exports = {
module:{
rules:[{
//配置正则表达式，查找后缀为.css文件
test:/\.css$/,
// 配置加载器,用！符号级联
use: ['style-loader', 'css-loader'],
}]
}
}
<font color="blue">构建本地服务器</font>
1.安装：npm install --save-dev webpack-dev-server
2.配置webpack.config.js文件
devServer: {
contentBase: "./build",//本地服务器所加载的页面所在的目录
historyApiFallback: true,//不跳转
inline: true//实时刷新
}
3.在webpackage里面的package.json中的scripts对象中添加如下命令，用以开启本地服务器，如果webpack里面没有package.json文件，那就新建一个
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack",
"server": "webpack-dev-server --open"
}
4.如果是新建的就执行以下下面的命令，wenpack路径下终端执行
sudo cnpm install webpack-dev-server
到这里本地服务器就构建成功了
拓展：
cnpm淘宝镜像下载说明地址
==https://npm.taobao.org/==
终端根目录 运行
sudo npm install -g
cnpm --registry=https://registry.npm.taobao.org
成功之后如下：
图片.png
其他命令：
npm root：查看当前包得安装路径
npm root -g：查看全局的包的安装路径
npm -v：查看npm安装的版本
网友评论