刘新修

1， npm install是帮助安装 vue,或React到本地，npm install也可以安装vue,React的开发工具。当然你完全可以像jQuery一样自己找网站下载下来，在页面中引入。
2,没有npm可以使用vue，vue只是一个前端框架。
3，4，node是js的服务执行环境，前端常常借助 node帮助前端实现工程化。很多工具是基于node的，比如说你说的webpack,grunt。
5，webpack,grunt是前端工程化的工具，可以帮助前端完成混淆压缩，校验等工作。
6，7，实战中没用过，请参考官方文档http://cn.vuejs.org/v2/guide/...
8，可以单纯的利用 php+vue或者php+react开发。
9，最后一个问题太大，可以写本书。而且老实讲，一切都需要实战中才能有更深的体会。
最后总结一下：
前端圈所谓得“乱”，一个是近些年前端框架层出不穷，工程化，解决方案越来越多，已经脱离了一般人认为的那个“好单纯好不做作”的前端。就像后端开发有很多工具协作开发一样，前端也需要越来越多的工作完成前端面临巨大的工作量。 前端的行业发展已经不是那种后端在php,jsp中写一些html,前端来写一些css来完成工作的阶段。老实讲，我现在80%的时间在写js。前端已经不是后端开发的最后一步甚至“附属品”，而成为真正意义的“客户端”。复杂度也就慢慢和app等客户端越来越接近。
总的来说，你还是可以按照原先的开发方式来开发自己的应用，当然考虑引进工具一些先进的理念方法来协助开发。node,webpack,vue这些概念不应该成为自己开发中的阻碍，而是在自己在面临一些问题时的利剑。这些概念的学习需要一天一天的来，毕竟一口吃不成个胖子 ：)

什么是npm?
从事网站制作的小前端们都知道cdn的概念，也就是在网站制作中如果我们需要jquery或者bootstrap等文件支持的话，就可以通过cdn引入的方式来实现调用。由于node的使用日益广泛，也带动了其组件npm的使用，而npm就是这些jquery以及bootstrap这些文件包的组合管理器。现在只要使用了node环境进行web网站开发，你就可以直接用npm进行调用以前所有的cdn文件了。

什么是webpack？
webpack简单来说就是前端代码资源的包管理工具，他自动整理你的项目结构，结合javascript的模块化组件，机型解析并交给浏览器渲染使用，大大提高前端的开发效率。

什么是vue-cli？它与vue脚手架有什么关系？
其实vue-cli就是vue的脚手架，vue脚手架的作用是用来自动一键生成vue+webpack的项目模版，包括依赖库，免去你手动安装各种插件，寻找各种cdn并一个个引入的麻烦。

什么是node.js？它与vue具体有什么关系？
提到vue就不得不说node了，vue作为一个前端框架技术，主要负责了数据渲染，界面展示效果，由于其易用性及便捷的维护应用日益广泛。而node作为一个服务器端语言，它是以javascript语言为基础的服务端程序语言，在实际的项目开发中，前端人员只要实现了环境的搭建，其实就可以仅仅从后台拿api接口进行数据调用，从而全部完成整个前端项目的展示。

前端由于近两年web前端技术发展革新速度飞快，一旦错过了，可能重新学的速度是非常慢的，只要尽早入手才能获得最好的学习效果。全栈网络专业从事郑州网站制作，我们也有专业的网站制作团队，愿意为每一个前端人员提供最新的前端知识分享。

 看了co的源码 比较难懂 了解了其原理后实现了一个最简版本https://github.com/yucong/simple-co 希望对想学习的tx有帮助～ yeild后面只支持thunk，co本身也是一个thunk 核心代码：

用法：

会打印出： content in a.txt content in b.txt done

下面做个简单对比：
传统方式，sayhello是一个异步函数，执行helloworld会先输出"world"再输出"hello"。

输出

co 的方式，会先输出"hello"再输出"world"。

输出

消除回调金字塔

假设sayhello/sayworld/saybye是三个异步函数，用真正的 co 模块就可以这么写：

输出

 koa 是由 tj大神利用 generator 开发的 web 框架。要理解 koa，首先要先了解 generator 与 co。作为搞定 koa 的第一篇，我们便谈谈这个。文章首发在boke.io

generator介绍

 function* Gene(){

    yield 1;

    yield 2;

}

var gene = Gene();

console.log(gene.next());//{ value: 1, done: false }

console.log(gene.next());//{ value: 2, done: false }

console.log(gene.next());//{ value: undefined, done: true }

console.log(gene.next());//Error: Generator has already finished  经@Ralph-Wang提醒从 v0.11.13 开始不抛错了，返回{ value: undefined, done: true }

从上面我们可以看到

generator 的定义和函数类似，只是在 function 后面多了一个*

调用generator 和调用函数一样，只是不像函数立即执行，而是会生成一个对象

generator 生成的对象存在一个 next 函数，调用 next 会返回 yield运算的结果对象，并停止。再次调用会在下一个 yield 处停止。

当所有的 yield 被执行完，调用 next 函数会返回{ value: undefined, done: true }。再次调用会报错

generator 与异步

 看完 generator 的介绍，你心里回想这跟异步有毛关系？不着急听我接着说

串行请求两个网页的代码

var request = require('request');

var a = {};

var b = {};

request('http://www.google.com', function (error, response, body) {

    if (!error && response.statusCode == 200) {

        a.response = response;

        a.body = body;

        request('http://www.yahoo.com', function (error, response, body) {

            if (!error && response.statusCode == 200) {

                b.response = response;

                b.body = body;

            }

        });

    }

});

我们再看看最终我们是如何利用 generator请求网页的

co(function *(){

  var a = yield request('http://google.com');

  var b = yield request('http://yahoo.com');

  console.log(a[0].statusCode);

  console.log(b[0].statusCode);

})()

上面的代码可以看到，co 里面传入了一个 generator，里面用 yield 调用异步函数。从逻辑上看，里面的异步被变成了同步。

co 到底有什么魔法？可以把我们从异步中解救出来？

想想 generator 的特性，当我们执行第一个 next 的时候，会调用第一个 request，此时我们去调用 request 的逻辑，然后把 generator 的实例穿进去。当第一个 request 逻辑完成时，在调用这个 generator 的 next，这样就到了第二个 yield 的逻辑了。当然这需要一些逻辑的封装，也就是 co 了。

根据上面的分析，我们大概可以写出下面的代码

function co(Gene){

    //先实例化一下

    var gene = Gene();

    //如果存在 next 函数

    if(gene.next){

        var fun = gene.next();//把异步函数返回过来，好继续封装

        //fun 处理完，再调用 gene.next()

        //...

    }

}

从上面的代码可以看出

yield 后面的内容需要返回一个异步函数，这样我们才可进一步封装异步处理的逻辑。

fun 需要可以传入参数，这样才可以处理多个异步

需要一个递归调用，这样才可以持续调用 next，同时根据 next 返回对象中的done属性停止逻辑

需要考虑错误处理

 今天就到这里，下一篇详细讲一下 co 的源码

看了co的源码 比较难懂 了解了其原理后实现了一个最简版本https://github.com/yucong/simple-co 希望对想学习的tx有帮助～ yeild后面只支持thunk，co本身也是一个thunk

核心代码：

function co(generator) {

  return function(fn) {

  var gen = generator();

  function next(err, result) {

    if(err){

      return fn(err);

    }

    var step = gen.next(result);

    if (!step.done) {

      step.value(next);

    } else {

      fn(null, step.value);

    }

  }

  next();

   }

}

用法：

var co = require('./co');

// wrap the function to thunk

function readFile(filename) {

    return function(callback) {

      require('fs').readFile(filename, 'utf8', callback);

    };

}

co(function * () {

    var file1 = yield readFile('./file/a.txt');

    var file2 = yield readFile('./file/b.txt');

    console.log(file1);

    console.log(file2);

    return 'done';

})(function(err, result) {

    console.log(result)

});

会打印出：

content in a.txt

content in b.txt

done

================================

generator_co:  http://liuxinxiu.com/generator_co/

使用npm install -g 'xxx' 之后仍然报
Cannot find module 'xxx' 错误，可以通过设置环境变量来解决；

export NODE_PATH=/usr/local/lib/node_modules/  
echo $NODE_PATH  

Error: Cannot find module 'ftp'

 V8 引擎概览

支持来自任何域名的Post请求，验证请求参数必须有: [name、gender] 否则直接JSON返回错误！

NodeJS数据接口(Post请求直接代理至后端PHP): http://liuxinxiu.com:3000/CORS_Node_Proxy/

PHP数据接口(验证跨域提交白名单外返回错误):  http://code.liuxinxiu.com/php/Post/CORS_PHP.php

使用NodeJs实现CORS 跨域资源共享，可传参origin通过限制，代码如下：

NodeJs数据提交接口地址 (不允许使用GET访问) ：http://liuxinxiu.com:3000/CORS_Node/

注意：NodeJs Server 是本站的测试环境，有时候因需要会临时关闭，该地址仅供测试，如您有需要请自建环境～

配合HTML代码如下：

HTML访问地址 (测试跨域) ==> http://test1.liuxinxiu.com/php/Interface/html/server.html?n=node

HTML访问地址 (非法参数) ==> http://test1.liuxinxiu.com/php/Interface/html/server.html?error=node

注意：本站的 NodeJs Server 是学习测试环境，有临时关闭的可能，建议在本地环境测试～

自建Node路由Jsonp接口访问地址：http://liuxinxiu.com:3000/jsonp?Jsoncallback=2016&&name=liuxinxiu

自建Node路由Jsonp接口访问地址：http://liuxinxiu.com:3000/Jsoncallback?Jsoncallback=1&name=Jack