Vue入门到上手（1）—— VueJs 填坑日记之基础概念知识解释

Vue入门到上手（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神秘的面纱了。

本文转载至博客园博主：王二麻子技术交流园地，侵删。

Vue相关文章：

• Vue入门到上手（1）—— VueJs 填坑日记之基础概念知识解释
  https://blog.csdn.net/weixin_44195856/article/details/107815578
• Vue入门到上手（2）—— VueJs 填坑日记之基础项目构建
  https://blog.csdn.net/weixin_44195856/article/details/107815860
• Vue入门到上手（3）—— VueJs 填坑日记之项目文件认识
  https://blog.csdn.net/weixin_44195856/article/details/107816999
• Vue入门到上手（4）—— VueJs 填坑日记之搭建Axios接口请求工具
  https://blog.csdn.net/weixin_44195856/article/details/107817367
• Vue入门到上手（5）—— VueJs 填坑日记之将接口用webpack代理到本地
  https://blog.csdn.net/weixin_44195856/article/details/107817615
• Vue入门到上手（6）—— VueJs 填坑日记之初识*.Vue文件
  https://blog.csdn.net/weixin_44195856/article/details/107818003
• Vue入门到上手（7）—— VueJs 填坑日记之渲染一个列表
  https://blog.csdn.net/weixin_44195856/article/details/107818297
• Vue入门到上手（8）—— VueJs 填坑日记之参数传递及内容页面的开发
  https://blog.csdn.net/weixin_44195856/article/details/107818481
• Vue入门到上手（9）—— VueJs 填坑日记之在项目中使用jQuery
  https://blog.csdn.net/weixin_44195856/article/details/107818658
• Vue入门到上手（10）—— VueJs 填坑日记之在项目中使用Amaze UI
  https://blog.csdn.net/weixin_44195856/article/details/107818787
• Vue入门到上手（11）—— VueJs 填坑日记之使用Amaze ui调整列表和内容页面
  https://blog.csdn.net/weixin_44195856/article/details/107819778
• Vue入门到上手（12）—— VueJs 填坑日记之项目打包发布
  https://blog.csdn.net/weixin_44195856/article/details/107819937

我是与其终，一个风起云涌的女孩子。
以下是我的公众号，主要写的是有关于前段后台数据库，面试技巧，学习方法，职场心得等，感兴趣的可以关注一下哦。

很高兴你能看到我的博客，希望能对你有所帮助。
qq群：可直接扫码进qq群，或者输入群号670983672。
微信群：可加下方博主微信，备注“进群”即可。