Node环境和Vue脚手架的搭建及其作用（详细教程）

一、Node.js

1.什么是Node.js?

Node（或者说 Node.js，两者是等价的）是 JAVAScript 的一种运行环境。在此之前，我们知道 JavaScript 都是在浏览器中执行的，用于给网页添加各种动态效果，那么可以说浏览器也是 JavaScript 的运行环境。那么这两个运行环境有哪些差异呢？请看下图：

简而言之，Node 为我们提供了一个无需依赖浏览器、能够直接与操作系统进行交互的 JavaScript 代码运行环境！

2.下载步骤：

①下载。下载地址:https://nodejs.org/en/,可根据电脑系统版本、操作系统下载适合的版本

②安装。双击安装包，点击Next，勾选使用许可协议，点击Next，选择安装位置（可根据个人情况更换路径。继续点击Next，点击Install，点击Finish完成安装。

③添加环境变量。进入环境变量，编辑【系统变量】下的变量【Path】

安装完成后可以进行验证：win + r ,输入命令：node -和npm -v（npm），弹出如：v16.14.0，那么就安装成功了，一般来说npm速度相对较慢，继而使用国内的淘宝镜像，安装命令如下：

npm install -g cnpm --registry=https://registry.npm.taobao.org

④配置环境。现在你全局的仓库是安装在c盘下的，可以通过npm list -global命令查看；所以当你们使用npm安装全局模块的时候会安装到c盘下面的文件夹，这会使得你c盘数据庞大，所以我们便可以修改默认存储地址；但是如果你c盘本身比较大，不在乎多存的这点数据，那就可以忽略不计这一步。

在你安装node的文件夹下新建两个文件夹；node_cache(缓存文件夹)node_global(全局仓库文件夹)

3.Node.js的作用

Node.js一发布，立刻在前端工程师中引起了轩然大波，前端工程师们几乎立刻对这一项技术表露出了相当大的热情和期待。上一次一种技术能被整个前端界如此关注那还是在几年之前，那时候Ajax这个概念刚刚被提出来。让JavaScript跑在server端，这个想法简直太棒了。这下我们不用再去学那些php、Ruby、Java、Scala或者其他什么对前端来说奇怪的语言，也可以轻松地将我们的领域扩展到server端，多么美好的前景！

Node.Js的首要目标是提供一种简单的、用于创建高性能服务器及可在该服务器中运行的各种应用程序的开发工具。

首先让我们来看一下现在的服务器端语言中存在着什么问题。在Java、PHP或者.NET等服务器语言中，会为每一个客户端连接创建一个新的线程。而每个线程需要耗费大约2MB内存。也就是说，理论上，一个8GB内存的服务器可以同时连接的最大用户数为4000个左右。要让web应用程序支持更多的用户，就需要增加服务器的数量，而web应用程序的硬件成本当然就上升了。

Node.Js不为每个客户连接创建一个新的线程，而仅仅使用一个线程。当有用户连接了，就触发一个内部事件，通过非阻塞I/O、事件驱动机制，让Node.js程序宏观上也是并行的。使用Node.js，一个8GB内存的服务器，可以同时处理超过4万用户的连接。

二．Vue

1.什么是Vue？

Vue是一个MVVM的渐进式javascript框架，它是初创项目的首选前端框架。Vue的目标是通过尽可能简单的api实现相应的数据绑定和组合的视图组件。

Vue框架是轻量级的，有很多独立的功能或库，在Vue里我们可以根据自己的项目来选用它的一些功能。Vue 的核心库只关注视图层，所以开发者关注的只是m-v的映射关系。

其中提到的“渐进式框架”和“自底向上增量开发的设计”是Vue开发的两个概念。

Vue可以在任意其他类型的项目中使用，使用成本较低，更灵活，主张较弱，在Vue的项目中也可以轻松融汇其他的技术来开发，并且因为Vue的生态系统特别庞大，可以找到基本所有类型的工具在vue项目中使用。

2.Vue脚手架搭建

①已经安装过node.js之后和淘宝镜像的话，vue的运行环境基本上就搭建好了，只需再安装全局的webpack（命令行：npm install webpack -g ）和vue-cli脚手架工具（在命令行里输入：npm install -g vue-cli ）就行了。

②输入 vue init webpack mypro 回车创建项目：

③进入项目文件夹：cd mypro (cd + vue init webpack mypro 中的项目名字mypro)，回车进入项目文件夹：

输入： npm install 初始化，安装依赖包node_modules

④安装完成后输入：npm run dev 运行就行了。

3.Vue的作用

①控件自动跟数据绑定，提交表单到后台的时候，可以直接使用data里面的数据值，而不需要再使用$("#id")那一套方法来获取控件的值，对控件赋值也方便很多，只需要改变data的值，控件就会自动改变值。将复杂的界面操作，转化为对数据进行操作。

②页面传值和状态管理

Vue的页面传值可供选择的方法非常多，比如使用子组件属性传值，比如使用页面url参数的方法传值，或使用vuex全局状态管理的方法页面传值等等。而原生开发的时，在页面有多个参数的时候，页面传值和初始化要复杂很多。而vue直接将参数保存在对象里面，直接给子组件的属性或vuex存储一个对象就行了。

③模块化开发、模块化更新

就像第二点所说的，其实可以引申到模块化开发。比如一个列表页面里面有添加功能，有修改功能，这时我们可以通过引用子组件的形式，当子组件内容更新的时候，修改主组件的数据，比如修改了一条数据后，我们需要列表页同时刷新，但我们不希望改变原来列表页的页码和搜索条件。假如你用原生开发来实现这个，需要写很多业务逻辑保存上一个页面的搜索条件和页码这些参数，但假如你用vue开发，将变得非常简单。

④代码可读性

Vue天生具有组件化开发的能力，因此不同的功能基本都是写在不同的模块里面，代码的可读性非常高。当一个新手接手一个旧项目的时候，基本上可以做到一到两天就能定位到要修改的代码，并进行修改。

⑤基于强大的Nodejs，添加新的组件库，基本一句npm命令就能安装。比如当我需要使用axIOS组件的时候，直接npm install axios安装一下，就可以使用axios这个组件。熟悉maven的同学估计很容易就能理解npm工具。

⑥主路由、子路由、主页面、子组件的方式，可以让我们彻底抛弃iframe。写过前端的同学都知道，因为iframe的滚动条、和子页面跟其他页面的交互性这些原因、用户体验还是远远没有单页面架构友好。而且使用Vue非常简单方便地实现系统菜单、导航等固定布局。

⑦css模块化：各个组件之间，可以使用相同的样式名，但有不同的样式属性。比如组件A和组件B的button都绑定了class="btn", 但在两个组件里，我们可以实现两个不同的btn样式属性，互不影响。