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

Posted 2021-04-16 我教你IT技术博客

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

本来写这一系列博客，只是为了记录自己在这一段时间学习vuejs的成果。如果有何纰漏请大家多多理解，不喜勿喷…

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

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

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

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

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的核心库，我们来看一下都有哪些核心库，如下：
1、vue.js 核心，不解释。
2、VueRouter2 实现路由组织工具。
3、webpack 项目打包以及编译工具。
4、nodejs 前端开发环境。
5、npm 前端包管理器。
6、axios ajax 接口请求工具。
7、sass-loader 和 node-sass css 预处理。
8、element 基于 vue 的后台组件库。
9、iview 基于 vue 的另一套后台组件库。
10、vue-cli vue 项目脚手架。一键安装 vue 全家桶的工具。

命令行的重要性
在学习vue时，我们会经常用到一些命令，如npm install、npm run dev等，这是vue-cli对我们提供的一些命令，现在的前端，不会点命令出去找工作都不好意思说自己是前端了。希望在初学vue或其它前端框架时，不要抵触命令行，因为它
1、更好
2、更快
3、更强
4、更装逼

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