前言

随着移动电话的普及,和微信的流行,很多的wap(h5)应用也随时流行了。
例如:微店,微站。 以及各个app中包含的h5页面。

手机的硬件特点是:

  • 硬件设备差。同主频的手机CPU性能往往是台式机的10分之一。 (手机的供电跟台式机设备差的很远)
  • 网络速度慢。4G 网络在很多时候下载速度只有几百K. 可能一个微信中的网页打开要很久。

所以,使用传统的web技术开发的网页,在手机端的表现往往特别差,因为传统技术的特点是:

  • 点击某个链接/按钮,或者提交表单后,web页面整体刷新。
  • js/css 的请求往往很多,过百是很常见的事儿。

每次页面整体刷新,都要导致浏览器重新加载对应的内容。特别卡顿。

另外,加载的内容也很多。很多传统页面的css/js 都多达上百个,每次打开页面,需要发送上百次请求。 如果页面中包含了websocket 等内容,打开速度就更慢了。

苹果的机器表现还好,iOS的设备打开Web页面速度很快,android机则大部分都很慢。 这个是由于手机设备操作系统、软件以及智能硬件决定的。

所以,单页应用(Single page app, 简称 SPA ) 则体现出了巨大的优势:

  • 页面是局部刷新的,响应速度快, 不需要每次都加载所有的js/css,
  • 前后端分离,前端(手机端) 不受(服务器端的)开发语言限制。

所以越来越多的app采用了 SPA的架构。

如果你的项目要用在h5上,那么一定使用单页应用框架。

Angular, React, Vuejs都是很好的框架。

我们在我公司的实际项目中,都使用Vuejs. 效果非常好。 开发速度快,维护效率高。 招人也方便。

本文跟官方文档不同。是根据实际项目经验,以 培养新人的角度来写的,所以会有这样的特点:

  • 我认为“很少使用的技术”, 略过
  • 只讲解最常见的知识
  • 在章节上,按照入门的难易度从简单到复杂。

学习的时候,务必要有个开发环境,看一点儿文档,就动手敲一敲代码。

否则光看是看不懂的。

本书中的所有示例源代码,都可以在 https://github.com/sg552/happy_book_vuejs 上找到。