前端框架Vue.js学习笔记：Vue.js初识与安装前详解，什么是Node.js和NPM？

本文链接：https://blog.csdn.net/qq_40679938/article/details/112342377

一、什么是Vue框架?

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

以上的解释来自于Vue.js的官网，其中解释一下2个加粗的词：

渐进式框架：在Vue的官网渐进式三个大字醒目的出现，那么什么是渐进式呢？我的理解是渐进式就是说这个框架可以循序渐进的去使用它，比如我们有个项目可以在其中某一个模块去使用Vue框架，可以只用一部分功能，而不必使用其全部。所以说Vue灵活性很高，可以跟其它框架结合使用不仅易于上手，还便于与第三方库或既有项目整合。
自底向上逐层应用：标准的解释应该是是从底层构件开始，按照模块调用图的机构，逐层向上集成，以检测整个系统的稳定性。就是说Vue框架和盖房子一样是是从“地基”开始一层一层慢慢扩展开发出来的，这是一种设计程序的过程和方法，就是先编写出基础程序段，然后再逐步扩大规模、补充和升级某些功能。

二、Vue框架的优点

Vue两大特点：响应式编程、组件化
Vue的优点：轻量级框架、简单易学、双向数据绑定、组件化、视图、数据和结构的分离、虚拟DOM、运行速度快

那么问题来了，什么是响应式编程？

这个词来源于2009 年，微软提出了一个更优雅地实现异步编程的方式—— Reactive Programming ，我们称之为响应式编程。
来看看百度百科的说法，解释太理论了，对于初学者根本看不懂在说啥，也很让人迷糊。

响应式编程是一种面向数据流和变化传播的编程范式。这意味着可以在编程语言中很方便地表达静态或动态的数据流，而相关的计算模型会自动将变化的值通过数据流进行传播。

我的总结和理解是：

响应式编程是一种面向数据流和变化传播的编程范式。这意味着可以在编程语言中很方便地表达静态或动态的数据流，而相关的计算模型会自动将变化的值通过数据流进行传播。
在命令式编程环境中，a:=b+c表示将表达式的结果赋给a，而之后改变b或c的值不会影响a。但在响应式编程中，a的值会随着b或c的更新而更新。
例如，我们在使用Excel电子表格时，电子表格程序其实就是很好的响应式编程的一个例子。单元格可以包含字面值或类似"=B1+C1"的公式，而包含公式的单元格的值会依据其他单元格的值的变化而变化。
响应式编程最初是为了简化交互式用户界面的创建和实时系统动画的绘制而提出来的一种方法，但它本质上是一种通用的编程范式。

三、Node.js是什么?

Node.js是一个Javascript运行环境(runtime environment)，不是一个js文件，实质是对Chrome V8引擎进行了封装。
Node.js 是一个让 JavaScript 运行在服务端的开发平台，它让 JavaScript 成为与PHP、Python 等服务端语言平起平坐的脚本语言。Node.js提供替代的API，使得V8在非浏览器环境下运行得更好。V8引擎执行Javascript的速度非常快，性能非常好。 Node.js是一个基于Chrome JavaScript运行时建立的平台，用于方便地搭建响应速度快、易于扩展的网络应用。
以前 JS 只能运行在浏览器中，Node.js 出现之后，不管是服务器上，还是我们自己的的笔记本上，只要安装了 Node.js 就可以运行 JS 代码了。

四、NPM是什么？

当一个网站依赖的js代码越来越多，开发人员发现这是一件很麻烦的事情：去 jQuery 官网下载 jQuery 去 BootStrap 官网下载 BootStrap 去 Underscore 官网下载 Underscore 。
有些开发人员就受不鸟了，于是npm就出来了，全称是 Node Package Manager 包管理工具。这一点和maven、gradle十分相似，只不过maven、gradle是用来管理java jar包的，而npm是用来管理js的。

NPM 的实现思路和maven、gradle是一样的：

有一个远程代码仓库（registry），在里面存放所有需要被共享的js代码，每个js文件都有自己唯一标识。
用户想使用某个js的时候，只需引用对应的标识，js文件会自动下载下来。

五、vue.js开发前为什么要安装node.js？

我们使用Vue.js一定要安装node.js吗？准确的说是使用vue-cli 搭建项目的时候需要nodejs。你也可以创建一个html文件，然后通过如下方式引入 Vue，一样可以使用Vue。

<!-- 开发环境版本，包含了有帮助的命令行警告 --> 
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

但是使用node是比较方便的，打包部署，解析vue单文件组件，解析每个vue模块，拼在一起等。启动测试服务器localhost, 帮你管理 vue-router，vue-resource这些插件。所以通常情况下我们会使用Vue+Node.js方式，特别是对中大型项目来说可以提高开发效率。

六、webpack是什么？

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

webpack就是前端资源模块化管理和打包工具,它可以将很多松散的模块按照依赖和规则打包成符合生产环境部暑的前端资源,还可以将按加载的模块进行代码分割,等到实际需要的时侯再异步,而要它自动实现这些功能,你得提前编辑好配置文件。

从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。

七、Vue-cli是什么？

vue-cli 是一个官方发布 vue.js 项目脚手架，之所以它叫脚手架，就像我们盖房子用的脚手架一样，盖房子用的脚手架是为了保证各施工过程顺利进行而搭设的工作平台。

vue-cli 是一个 npm 包，通过 vue 命令提供核心功能。Vue-cli是一个专门为单页面应用快速搭建繁杂的脚手架，它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板。