1、VueJs 填坑日记之基础概念知识解释

概述
在最开始据说vuejs这个词是在2016年，当时天真的认为本身是个后端开发工程师不须要学习太多的前端知识，不过紧接着在2017年在公司就用到了vuejs。对于初学者（尤为是干后端的初学者）来讲，刚接触时，有好多思路都很难理解。

原本写这一系列博客，只是为了记录本身在这一段时间学习vuejs的成果。若是有何纰漏请你们多多理解，不喜勿喷…

再说，在目前互联网的调整发展状况下，javascript更是在快速的更新迭代，现在对前端工程师来讲，须要会的不仅有css+div，js+jq了。近年来，javascript各界大神也发布了不少优秀的框架，如安哥拉（angularjs），Reactjs等。而vuejs更是由国人大神【尤雨溪(Evan You)】主导开发并获得了业界承认的优秀框架。

所以，综合上述种种，本人决定以该系列博客来记录本身的学习过程及问题，在写做时因为本人方案功底薄弱，写的很差但愿你们多多见谅。在学习时，参考了另外一篇特别好的博客，如下有些内容也借鉴而来，忠心感谢FungLeo，是大家无私的奉献，才让咱们有了学习的参考，如下是地址：
http://blog.csdn.net/fungleo/article/details/77575077

基本理念
本文将经过vue-cli+axois+amaze ui+jquery来搭建一个小型的后台管理系统，数据来源使用cnode.js 的公开 api接口。因为该项目属于小型项目，因此不涉及vuex等知识。

先后端分离开发模式
在N年前，咱们开发web项目的流程是：
一、设计师设计页面
二、美工将设计稿经过css+div切片成html的页面
三、后端工程师拿切好的html页面
在这种开发模式上有明显的缺点，就是页面出现哪怕只是特别小的问题或是修改很小的功能，也须要先后端工程互相协调开发。对后端工程师来讲，并不能更专一的去实现业务逻辑。
因此近年出如今先后端分离开发模式，以下：
一、设计师设计页面
二、前端、后端、测试等其它开发人员约定接口规范（造成接口文档）
三、前端工程师按接口文档来开发前端（前期可模拟接口返回的数据模型）来进行前端的开发
四、后端工程师按接口文档开开发相应接口
与几年前相比，对前端工程师的要求无疑提升了不少，如如何调用接口等。对后端工程师来讲却能够更专一的实现业务逻辑。

时代在发展，困难如弹簧，你强它就弱，你弱它就强。因此为了避免被时代所淘汰，努力吧！

单页应用程序（SPA）
单页Web应用（single page web application，SPA），就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。
要想更好的学习SPA，须要你们先了解一下锚点连接：
HTML中的连接，正确的说法应该称做"锚点"，它命名锚点连接（也叫书签连接）经常用于那些内容庞大繁琐的网页，经过点击命名锚点，不只让咱们能指向文档，还能指向页面里的特定段落，更能看成"精准连接"的便利工具，让连接对象接近焦点。便于浏览者查看网页内容。相似于咱们阅读书籍时的目录页码或章回提示。在须要指定到页面的特定部分时，标记锚点是最佳的方法。
更多关于锚点连接的解释请参见：
https://baike.baidu.com/item/%E9%94%9A%E7%82%B9%E9%93%BE%E6%8E%A5/7472012?fr=aladdin
为何要用锚点连接，缘由是锚点连接并不会使页面进行跳转或刷新。以咱们的 vue 项目为例，它的本地 url 结构通常为如下格式：
http://localhost:8080/#/Inbox
能够明显的看到咱们所谓的路由地址是在 # 号后面的，也就是利用了锚点的特性。

RESTful 风格接口
URI表示资源的两种方式：资源集合、单个资源。以下：
资源集合：
/zoos //全部动物园
/zoos/1/animals //id为1的动物园中的全部动物
单个资源：
/zoos/1 //id为1的动物园
/zoos/1;2;3 //id为1，2，3的动物园
更多关于RESTful 风格接口的解释请参见：
http://blog.csdn.net/yue7603835/article/details/52536497

VUE是什么？
目前业界主流的前端三大框架：angular、react、vue，目前angular正处于新旧交替因此不选择，剩下的两个都很是优秀，可是vue的学习成本要比react低好多。一样都优秀的框架，咱们选择vue，只由于两个字“简单”。

vuejs是一个前端框架，并不仅是官网下载下来的一个vue.js文件。官方的解释：
Vue.js (读音 /vjuː/，相似于 view) 是一套构建用户界面的渐进式框架。与其余重量级框架不一样的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不只易于上手，还便于与第三方库或既有项目整合。另外一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也彻底可以为复杂的单页应用程序提供驱动。
若是你是有经验的前端开发者，想知道 Vue.js 与其它库/框架的区别，查看对比其它框架。
更多关于vuejs的解释请参见：
https://cn.vuejs.org/v2/guide/

在上面提到了Vue的核心库，咱们来看一下都有哪些核心库，以下：
一、vue.js 核心，不解释。
二、VueRouter2 实现路由组织工具。
三、webpack 项目打包以及编译工具。
四、nodejs 前端开发环境。
五、npm 前端包管理器。
六、axios ajax 接口请求工具。
七、sass-loader 和 node-sass css 预处理。
八、element 基于 vue 的后台组件库。
九、iview 基于 vue 的另外一套后台组件库。
十、vue-cli vue 项目脚手架。一键安装 vue 全家桶的工具。

命令行的重要性
在学习vue时，咱们会常常用到一些命令，如npm install、npm run dev等，这是vue-cli对咱们提供的一些命令，如今的前端，不会点命令出去找工做都很差意思说本身是前端了。但愿在初学vue或其它前端框架时，不要抵触命令行，由于它
一、更好
二、更快
三、更强
四、更装逼

第一篇文章，基本没有代码，接下来咱们就要开始慢慢的揭露vue神秘的面纱了。