【转】Vue.js入门教程（一）从静态页面到前后端分离开发

第一章：基础知识

我能看懂吗？

只要你现在能用html+css+js制作一个静态页面，相信我，你100%可以读懂这篇文章。

本文尤其适合那些想要了解前后端分离开发技术，或者刚刚脱离传统MVC开发模式的前端人员。
回想一下，常见的开发流程是什么样子的？

设计师先出图，然后前端开发人员把这些图切成页面交给后端，后端开发人员再把php或者java嵌入html页面生成数据。

你有没有发现这个开发模式的几个弊端：
第一，设计师设计了10张图，你就要做10个页面，万一设计师修改了一个地方，你这10个页面每个地方都要重新修改一遍；
第二，嵌入式开发，跳转页面的时候是同步的，页面刷新的时候会产生空白体验很不好；
第三，对于一些跨平台的应用，比如说小程序。后端人员就只能把原来生成到html上的数据，改为接口的形式再提供给前端。

我们大胆设想，能不能把前端开发模块化，比如，页面顶部是一个公共模块，底部是一个公共模块。所有页面都引用这俩模块，修改的时候，只需要修改公共模块，改一个地方10个页面就跟着全变了。
并且所有的数据通讯都通过ajax来完成，这样，pc和移动端共用一套接口，后台仅提供数据，逻辑和渲染都在前端完成。

vue就是这样一套快捷的框架，它可以简单有效的解决上述所有问题，本文将会由浅入深的为你讲解vue的使用和前后端分离开发的强大之处。

初步了解

所谓设计模式，龙哥举一个生动的例子帮助你理解：比如我们经常打的王者荣耀中刺客打野，战士上单，法师走中路。这种默认形成的，大家都认可的套路就叫设计模式。
后端编程语言中有一个非常经典的设计模式名叫MVC。
我们平时开发的静态页面就是V层，视图层。帮助视图层改变数据，并且发送数据给后台的叫C层，控制器。分类储存数据的是M层，模型。

传统的MVC开发模式

这里你会发现一个非常有意思的情况就是：帮助视图做改变本来应该是前端的事。但是现在归为控制器中了。不分离式开发的时候，控制器和模型都是在后端的。
如果开发人员在前端使用jquery，他还需要获取到这个元素再修改dom的值。数据流瞬间被打乱，并且繁琐的dom操作让页面变得缓慢无比，这不是我们想要的！

于是MVVM诞生了。你会注意到，C层不见了。这就要提到vue最大的优势：它实现了数据到视图的自动化，解决了mvc中逻辑层需要处理帮助视图改变这块的工作。

vue中使用的MVVM开发模式

所以总结一下：mvvm比mvc的好处就再于实现了自动化更新视图，让数据去驱动视图。省掉了我们去document.getElementByxxx那一步！

然后我再传授你一些其他的新颖理念，让你的理论更加扎实...

前端项目工程化，听着很高大上！

所谓的工程化，就是用软件开发的那一套理论来管理前端。

从开发的规范，代码的迭代，代码库分支的管理，模块，测试和部署。这些操作都是一个体系里面的东西。这也是前端从后端分离出来的一个显著的问题。它没有一个特定的规范和流程，那样的结果势必是混乱的。

那么就像写作文一样，我们要问：时间，地点，人物是谁？前端我们要问，用什么方式迭代和管理代码？用什么工具搭建和管理项目？如何部署？
如果有人面试问你这个问题，你应该这样回答：我使用码云Git管理代码库，使用基于webpack的vueCLI脚手架搭建项目，后端通过数据接口AJAX传递数据。

这里提到了使用webpack打包代码和一些自动化手段，我们不做讨论，当我们熟练掌握了vue的使用以后，我们会深入探讨基于webpack的vuecli的使用，那将会我们的终极目的！

大概了相关概念以后，我们正式进入vue框架的学习吧！

作者：党云龙
链接：https://www.jianshu.com/p/3b44eda73cc5
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。