参考文章: 手把手教你搭前端
如何开始
在开始搭建前端框架之前，大致会用到如下工具包:
VUE
Webpack
Vue-cli
NodeJs
NPM
ElementUI
Node-Sass
Axios
Vue 是什么？
下图是官网 给的解释
是一套渐进式的JavaScript的框架，可能有同学可能不太理解什么是渐进式？
比如你事先有一个现成的服务端应用，那么你就可以使用VUE将其作为该应用的一部分嵌入到其中;
事实上也是根据自己所需，只用所需的部分即可，并不需要考虑其他不需要的部分；
再直白点理解就是:
你不需要完全掌握VUE的所有功能特性就能开始使用，在使用的过程要再有其他需求可根据其需求再慢慢增加；
因为不需要上来就关注全局，这可能是很多人选择它并易于上手一个重要原因。
Webpack 是什么？
再说它之前，
我们首先要知道我们要搭建的前端项目是干什么的？
要说明前端框架是干嘛的？
就得先知道前端项目包含些什么？
当然常见得无非就是各种静态资源文件，
例如：
- 脚本(js)文件；
- 样式(css)文件
- 图片(png\jpg…)文件
- 其他媒体(MP3、MP4…)文件等等...
我们搭建前端项目的最基础的一个职责就是对这些静态资源的管理；
例如对静态资源的构建和打包，因此资源打包工具是其中很重要的一环。
官网的解释
它有以下几个关键特性：
- 可创建单个或多个按需加载的块，以减少初始加载时间
- 在编译期间会解决依赖关系，减少了运行时的大小
- 加载器可以在编译时预处理文件
Vue-cli是什么？
上文提到打包工具，我们选择了在界面具有老大地位的Webpack，
随着使用Webpack的人越来越多， 针对Webpack的各种插件如百家争鸣般越来越多，
如果我们自己准备从0开始配置Webpack,那往往要琢磨好久好久...
有没有一个工具能帮我们既合理又迅速的整合最佳配置呢？
让我们不需要将大部分时间浪费在配置环节呢？
对，你猜的没错，这就是Vue-cli（脚手架）
先看下官网介绍，如下图：
有了它我们就不用关心Webpack如何有效配置，只需要专注于业务代码。
开箱即用多方便。
NodeJS是什么？
有的同学看到有js就把它理解成类似jQuery的js框架库，很遗憾你想多啦，这是两码事儿。
还是先来看看官网怎么说？
可以把NodeJs类比java中的JVM，也就是java的虚拟机，
说的再直白点就是你开发java程序前安装的那个JDK（想了解更多这方面的内容，传送门）
java经常鼓吹自己【一次编写，处处运行】依仗的就是JVM这个坚强后盾。
无论是Windows还是Linux操作系统，只要安装了JVM都可以运行.class文件。
NodeJs的作用和JVM的作用是一样的；
它是js的运行环境，不管你是什么系统，只要安装了对应版本的NodeJs,你就可以用js来开发后台程序。
说到这里可能有同学会想到，一直以来只能运行在浏览器上的js既然可以做后端开发啦，也就意味着擅长Js的前端开发人员摇身一变成了“全栈开发工程师”啦。
回到重点为什么要它？
其实VUE本身不依赖NodeJs，那为什么还要用它？
如果我们单纯的只是使用VUE,当真是不需求使用也不需要安装NodeJs；
如上文所述，因为用了Webpack来构建打包项目，而Webpack又是基于NodeJs开发的，So...
选择NodeJs原因还有很多，这里不做过多说明，有兴趣的官网了解下。
NPM 是什么？
使用NodeJs就离不开NPM，那么npm是什么？
来看下官网的介绍,如下图示：
简单翻译下
npm号称是世界上最大的软件注册中心，
全球（来自各大洲）开源软件开发者们利用它来相互借鉴相互共享…
你也可以理解NPM是javascript包的服务中心，我们用它作为工具来对NodeJs包进行管理；
有了它就可以将webpack、Vue-cli等上文刚刚提到过的或未说到而后续会使用到的工具包下载安装本地，来提供后续的使用
npm提供了非常有用的解决方案，支持大量的测试用例。
除【npm】外，业界目前主流的其他NodeJs包管理工具有以下几个：
常用分别有【yarn】、【cnpm】以及【pnpm】等
【cnpm】
是淘宝做的npm镜像，cnpm跟npm用法完全一致，只是在执行命令时将npm改为cnpm。
主要是因为npm插件的安装是要从国外服务器下载，受网络影响大，有很大可能出现异常，要是npm的服务器在中国就不一样啦，于是淘宝团队干了这事儿；
引用淘宝官网介绍如下：
这是一个完整 npmjs.org 镜像，
你可以用此代替官方版本(只读)，
同步频率目前为 10分钟 一次
以保证尽量与官方服务同步。
【yarn】
一开始的主要目标是：
解决上一节中描述的由于语义版本控制而导致的npm安装的不确定性问题,
像npm一样，yarn使用本地缓存。
与npm不同的是，yarn无需互联网连接就能安装本地缓存的依赖项，运行速度得到了显著的提升。
【pnpm】
运行起来非常的快，超过了npm和yarn,
想了解更多看作者[Zoltan Kochan]怎么说...
【pnpm】可能是一些测试用例的更好的选择。例如，它可以在运行大量集成测试并希望尽可能快地安装依赖关系的中小型团队中发挥作用.
有兴趣的同学可以自行去了解下，这里不做过多介绍啦。
Element 是什么？
Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。
这是官网的介绍，如下图示：
Node-sass是什么？
在说清楚node-sass是什么之前，我们要先知道sass是个啥？
Sass是一种预处理器脚本语言，可以解释或编译成层叠样式表（CSS）。
那这样就好理解啦，
这是官网的介绍，如下图示:
大致意思是：
Node-sass是一个库，它将Node.js绑定到libsass,
流行样式表预处理器Sass的C版本。
它允许用户以令人难以置信的速度将.scss文件本地编译为css，
并通过连接中间件自动编译。
Axios是什么？
看下中文网的介绍，如下图示：
简单的讲:
就是可以发送get、post请求；
不过说到get、post，大家应该第一时间想到的就是Jquery，毕竟前几年Jquery比较火的时候，大家都在用他。
也有人说Axios是对Ajax做了封装；
但是由于Vue、React等框架的出现，Jquery也不是那么吃香了。
也正是Vue、React等框架的出现，促使了Axios轻量级库的出现；
因为Vue等，不需要操作Dom，所以不需要引入Jquery.js了。
我们再说一下Axios用在什么场景？
在特性里面已经有提到；
浏览器发送请求，或者Node.js发送请求都可以用到Axios。
像Vue、React、Node等项目就可以使用Axios；
如果你的项目里面用了Jquery；
此时就不需要多此一举了，jquery里面本身就可以发送请求。
