nodejs基本知识

一、使用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("");
    res.end();
})
console.log(22222222);
server.listen(8787);  //8787：表示端口号 ，在浏览器地址栏输入 http://localhost:8787 运行

服务器设置编码格式的语句有三种：

// res.write("");
// 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进程

注：如果同时运行多个程序。每个程序端口号必须不同，不然会报错，因为一个端口号只能运行一个程序，下面是报错的内容

图片.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

单独安装某个插件

比如：安装cookie

npm install cookie

图片.png

卸载cookie

npm uninstall cookie

图片.png

一步安装项目中所有的插件

1、终端输入命令 npm init ，自动在项目下生成package.json文件

2、终端命令：npm install
会把我们所在目录下项目下的package.json里面需要的插件自动全部下载下来

图片.png

使用npm安装vue

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

js文件打包

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

4.主入口文件index.js

console.log("我是index.js文件");
require('./index.css');
var res = require("./module1.js");
console.log(res.a);
res.fn();

css样式打包：

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

2.修改webpack.config.js

module.exports = {
 module:{
       rules:[{
       //配置正则表达式，查找后缀为.css文件
       test:/\.css$/,
       // 配置加载器,用！符号级联
       use: ['style-loader', 'css-loader'],
     }]
    }
}

构建本地服务器

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安装的版本