vue node npm 关系

node.js

Node.js是一个基于Chrome JavaScript运行时建立的平台， 用于方便地搭建响应速度快、易于扩展的网络应用
vue-cli 脚手架搭建项目的时候需要nodejs
使用node有几件事，打包部署，解析vue单文件组件，解析每个vue模块，拼在一起，转码es6\sass, less ，启动测试服务器localhost8080, 帮助管理 vue-router，vue-resource这些插件，直接拿来用。
npm则是包含在node.js里面的一个包管理工具

npm（包管理工具）

NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：
允许用户从NPM服务器下载别人编写的第三方包到本地使用。
允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

与npm 功能相似的

1. cnpm

//安装 
//网址：http://npm.taobao.org
npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm跟npm用法完全一致，只是在执行命令时将npm改为cnpm。
淘宝团队做的国内镜像，因为npm的服务器位于国外可能会影响安装。淘宝镜像与官方同步频率目前为 10分钟 一次以保证尽量与官方服务同步。
2. yran

//安装 
//官网：https://yarnpkg.com/zh-Hans/ 
npm install -g yarn

yarn是facebook发布的一款取代npm的包管理工具。
Yarn 缓存了每个下载过的包，所以再次使用时无需重复下载。 同时利用并行下载以最大化资源利用率，因此安装速度更快。
在执行代码之前，Yarn 会通过算法校验每个安装包的完整性。
使用详细、简洁的锁文件格式和明确的安装算法，Yarn 能够保证在不同系统上无差异的工作。

3. pnpm

// 安装
// 网址:https://github.com/pnpm/pnpm
npm install -g pnpm

pnpm是Node.js的替代软件包管理器。它是npm的直接替代品，但速度更快，效率更高。
pnpm运行起来非常的快，超过了npm和yarn
利用硬链接和符号链接来避免复制所有本地缓存源文件
pnpm继承了yarn的所有优点，包括离线模式和确定性安装

总结

npm仍然提供了一个非常有用的解决方案，支持大量的测试用例。大多数开发人员使用原始npm客户端仍然可以做得很好
yarn的确定性安装，可以避免很多潜在的问题，相对安全
pnpm可能是一些测试用例的更好的选择。

webpack

webpack是一个现代JavasScript应用程序的模块打包器(module bunder)
将sass/less 等预编译的css语言转换成浏览器识别的css文件
能够将多个预编译文件打包成一个文件
打包image/styles/assets/scrips/等前端常用的文件
搭建开发环境开启服务器
监视文件改动，热部署。
将单文件组件(*.vue)类型的文件，转化成浏览器识别的内容

与webpack功能相似的

1. Grunt

Grunt插件是基于Node.js使用的，通过npm(Node.js的包管理器)安装并管理。
Grunt的出现早于Gulp，Gulp是后起之秀。他们的本质都是通过 JavaScript 语法实现了，有资源压缩，代码检查，文件合并等功能
Grunt比较老旧，功能少，更新少，插件少已经被开发者抛弃。
javascript语法错误检查
实时监控文件变化、调用相应的任务重新执行
压缩代码

2.Glup

Gulp吸取了Grunt的优点，拥有更简便的写法，通过流（Stream）的概念来简化多任务之间的配置和输出，让任务更加简洁和容易上手。
html、image、css、js压缩
javascript语法错误检查
将sass/less 等预编译的css语言转换成浏览器识别的css文件
搭建开发环境开启服务器
监视文件改动，热部署
使用条件编译输出不同的结果，比如app页面和mobile页面
打包生成线上版本代码
mock数据
3.F.I.S
Fis是百度出品的一款前端的工程构建工具。
解决前端工程中性能优化、资源加载（异步、同步、按需、预加载、依赖管理、合并、内嵌）、模块化开发、自动化工具、开发规范、代码部署等问题。

总结

gulp与webpack上是互补的，还是可替换的，取决于你项目的需求。如果只是个vue或react的单页应用，webpack也就够用；如果webpack某些功能使用起来麻烦甚至没有，那就可以结合gulp一起用。

vue

Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
使用vue的方法有两种

通过nodejs使用webpack 搭建 vue-cli脚手架
用script标签引入vue.min.js这样的，在js里实例化vue
//脚手架安装
//vue-cli 全局安装
npm install -g vue-cli
//初始化项目
vue init webpack demo(你新建的项目名称/文件名称)

关系梳理

webpack能够把.vue后缀名的文件打包成浏览器能够识别的js，而这个.vue文件装换需要打包器vue-loader
这个vue-loader打包器是可以从npm上面下载（npm上面有很多资源包），npm下载文件之后，webpack打包文件的时需要node环境去运行