Vue.前端各组件介绍(Node,Express,CommonJS,Npm,Cnpm,Nrm,Webpack)

NodeJS

简单的说 Node.js 就是运行在服务端的 JavaScript。

Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。

Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。

类比：

相当于JS的JVM，只要安装了Node就可以使用JS进行开发了。

Express

有了Node这个JVM，大牛就开始用JS写各种模块和框架了。

比如MVC框架(类比SSH，SSM)

Sails. js，Total.js，Partial.js，Koa. js，Locomotive. js，Express. js,Flatiron. js

CommonJS

写框架时，怎么组织JS代码呢，Java中通过类来完成，JS中没有设计类似机制，只能通过函数封装，对象，立即执行函数 等机制来保证 JS代码可以实现类似Java类 类似的封装。这种JS写法，称为规范。目前，通行的JavaScript模块规范主要有两种：CommonJS和AMD。
 

JS模块化写法详细可以参考：https://www.cnblogs.com/ranyonsue/p/10143108.html

Npm

npm 是 Node.js 官方提供的包管理工具，他已经成了 Node.js 包的标准发布平台，用于 Node.js 包的发布、传播、依赖控制

npm 为你和你的团队打开了连接整个 JavaScript 天才世界的一扇大门。它是世界上最大的软件注册表，每星期大约有 30 亿次的下载量，包含超过 600000 个 包（package） （即，代码模块）。来自各大洲的开源软件开发者使用 npm 互相分享和借鉴。包的结构使您能够轻松跟踪依赖项和版本。

npm 由三个独立的部分组成：

1. 网站 https://www.npmjs.com/
2. 注册表（registry）
3. 命令行工具 (CLI)

网站 是开发者查找包（package）、设置参数以及管理 npm 使用体验的主要途径。

注册表 是一个巨大的数据库，保存了每个包（package）的信息。

CLI 通过命令行或终端运行。开发者通过 CLI 与 npm 打交道。

类比：

nexus 私服管理jar包的功能

cnpm

npm 的仓库是国外网站，比较慢

类比：中央私服下载比较慢，可以设置淘宝的的镜像能快一点。

cnpm 访问的就是淘宝镜像，命令都变了。

或者可以通过修改npm的仓库仓库的默认地址可以达到访问淘宝镜像的目的，这时就不需要按照cnpm了。

nrm

扩展：默认地址不知是淘宝有，修改默认地址有没有简单方法呢。nrm命令，nrm只是用来切换地址的，可以使用命令nrm use taobao或 nrm use npm来进行两者之间的切换。

参考：https://blog.csdn.net/jinyouxinzao/article/details/108473809

Webpack

中文官网

https://webpack.docschina.org/

问题：

1. JS中相互引用会形成一颗树形结构，普通开发都是全部加载，比如你使用了demo1.js中的一个方法，你必须将demo1.js全部引入，浏览器也必须全部加载才可以使用。

2. JS依赖可能会出现图状，或者为版本问题，打包是个问题

解决：

1. 使用代码分析依赖树

2.合并一些公用的东西，解决了版本依赖冲突问题

3. 删除没有用到的方法，将使用到的方法和代码重新打包为新的JS文件

类比：

相当于maven中的打包功能，会包代码打包问题jar包

更强大处是，maven通过avg引入jar，打包时不会分析，全部会打包到jar包。webpack会分析那单代码有用哪些没用，只讲有用的代码生成新的js文件，并打包(package不压缩)。

依赖环境：NodeJS

 参考：

https://segmentfault.com/a/1190000006178770

Grunt

       基于 Node.js的前端JavaScript语言项目构建工具，即脚手架。

       一句话：构建项目自动化。对于需要反复重复的任务，例如压缩（minification）、编译、单元测试、linting等，自动化工具可以减轻你的劳动，简化你的工作。当你在 Gruntfile 文件正确配置好了任务，任务运行器就会自动帮你或你的小组完成大部分无聊的工作。

       官网：https://www.gruntjs.net/

       类比：java 后端中的 Jenkins

Vue

vue.js 是库，不是框架

vue.js 支持路由功能开发的 叫vue-route.js

vue.js支持数据请求功能开发的 叫vue-resource.js

vue类似jquery一样，直接在html中引入就可以使用，不需要基于node环境

等到与Vue一起配合使用的第三方应用的库或框架多起来后，一个个从html里引入就不方便了，所有要借用node.js中的npm管理包的引入，是方便包管理

使用Vue.js开发的前端项目如何部署？我们用到node.js中的程序打包工具比如webpack（node.js中的程序部署打包工具），可以直接require引入之后将不同模块打包成单个js文件。同时这些工具提供各种自动化处理，让前端开发更爽。

Vue.js开发有第三方支持的项目构建工具，vue-cli脚手架

与其说是VUE需要借助NODE开发前端项目，不如换个思路，在NODE中集成VUE开发前端项目，所以，先安装Node,使用Node的npm先安装Vue，然后再安装vue-cli脚手架，最后通过vue-cli脚手架构建前端项目。