下载掌阅APP，畅读海量书库
立即打开
前端是个高度依赖框架实现快速开发的工作，对于很多前端初学者来讲并不知道各种主流框架之间的区别，本节主要阐述前端框架之间的区别与国内外前端主流框架的分析。
类似于国内比较火的Bootstrap、VantUI与ElementUI这类框架，主要用于实现快速页面布局，框架设计团队会将一些常用的前端组件封装好，使框架使用者能够快速地完成组件调用，而不需要每个项目都实现一次类似于焦点图、穿梭框或面包屑等功能，这样可以极大地提升前端开发效率。
还有一些框架，如Axios、Fetch等框架，则主要用来对前端HTTP请求进行一系列封装，简化前端页面请求的代码，这些框架目前大多是基于ES6的Promise去实现的，在前端开发中，二者也经常被引入项目框架。
而类似于jQuery、Vue.js和React.js等框架，主要是用来实现对页面的非静态开发，其中jQuery与后两者完全不同，jQuery是基于DOM操作的框架，主要提高事件操作上的体验，而Vue.js与React.js这类框架，更多地偏向于处理数据，通过数据驱动视图更新的形式，结合虚拟DOM实现对页面的一系列操作。
至于Three.js、Node.js、TypeScript等前端流行框架都有其各自的功能和特殊的应用场景，在此就不做过多赘述。
在市场的占有率上，目前全世界运行中的项目，jQuery仍稳居榜首，毕竟类似于React这种MVC框架流行起来的时间相对于jQuery较短，而jQuery在传统项目中早已占据了优势，但随着MV*（包含MVC、MVP和MVVM）框架的崛起，jQuery让出宝座也只是时间问题。
目前国外相对流行的框架主要有React.js和Angular.js等，其中React.js起源于脸书（这里补充一下，如今脸书已正式更名为Meta，下文将以Meta称呼该公司）的内部项目，用来架设Instagram网站，并于2013年5月开源。React.js目前在国内也相对较火，这主要源于其社区的开放性，而Angular.js（当前已被谷歌收购）由于更新迭代太快，国内早期用得比较多，至今很多项目也已经弃用，使用Vue.js或React.js进行了重构。
从上文可以得知，React.js和Angular.js在国内均有其一席之地，实际使用率上React.js更多一些，然而，二者有个共同特征：社区基本以英文居多。这对世界上绝大部分的前端工程师肯定是好事，但对于国内的前端开发人员则并不友好。另外，React.js的上手难度较高，因此初学者往往很难简单地通过文档去掌握它，绝大部分的React.js项目存在于国内大厂，而中小企业或项目则更倾向于Vue。在这个背景下，Vue成为国内目前最为流行的前端MVVM框架。
Vue（读音/vjuː/，类似于view）是一套用于构建用户界面的渐进式框架。与其他大型框架不同的是，Vue.js被设计为可以自底向上逐层应用。Vue.js的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链及各种支持类库结合使用时，Vue.js也完全能够为复杂的单页应用提供驱动。
根据百度百科的描述：尤雨溪，前端框架Vue.js的作者，HTML5版Clear的打造人，独立开源开发者。曾就职于Google Creative Labs和Meteor Development Group。由于工作中大量接触开源的JavaScript项目，最后自己也走上了开源之路，现全职开发和维护Vue.js。
笔者从事前端开发与前端培训多年，对前端的就业行情有着相对较可观的了解。国内前端开发人员很大一部分是通过IT培训输出到市场上的，其中这部分学员寻找Vue.js的相关工作占比超过90%，并且培训机构及高等院校大多也会将Vue.js列为前端体系的主要课程。在这种前提下，Vue.js实现了弯道超车，在这个前端框架遍地开花的时代，后来者居上，成为国内前端最流行的框架之一。
同时，不得不承认，Vue.js在一定程度上也参照了React.js等优秀框架的设计理念，而且文档与社区更加适合初学者上手，用法也相对简单。
前端开发的编辑器有WebStorm、VS Code等神器，但真正意义上做到容易使用、插件多、兼容性强且免费的，这里推荐VS Code。
VS Code的全称为Visual Studio Code，可通过VS Code官网直接下载，如图1-1所示。该软件是免费开源的，本书后续的课程均是通过VS Code进行开发。
图1-1 Visual Studio Code官网
本节主要阐述前端主流框架的分析、Vue.js框架的简介与作者，以及开发编辑器。
学习一个框架，需要参考其官网https://cn.vuejs.org/，官网界面如图1-2所示。
图1-2 Vue官网
通过首页的“起步”按钮可以进入教程文档，单击“安装”按钮即可了解Vue.js的安装方式。
如果开发普通的HTML页面，想要体验Vue.js，则可以使用CDN的形式引入Vue框架，在HTML的head标签中加入链接引用代码，代码如下：
这里建议初学者直接把src中的URL粘贴到浏览器中，全选后复制代码，在项目中新建Vue.js文件，并粘贴刚刚复制的代码。这样可以在无网状态下使用VueCDN。
后续通过Vue CLI 5（Vue.js官方的脚手架）方式引入，可以使用该方式，命令如下：
#最新稳定版 $ npm install vue
本节主要讲解了Vue的引入方式。在后续的章节中，会优先使用CDN，直到讲述Webpack之后，才会开始介绍Vue CLI的具体项目创建方式。