1、技术选型的背景


前端技术发展日新月异，互联网上出现的新型框架也比较多，如何让新招聘的人员能够直接上手接替项目，或者有相关人员请假，替补人员的接替工作，如何做到不同前端工程师的开发的差异性更小，是我们公司应该考虑的一个问题。


BAT公司的招聘要求都提到了“至少熟悉React、Vue、Angular其中一种前端MVVM框架，有前端工程化与模块化开发实践经验”相关字眼。


我们主要从PC端、公众号（移动端H5）、小程序三大平台进行前端的技术选型，并来说说选其技术的几大优势。


2、VUE技术的优势


互联网前端大潮后，前端出现了3大框架，分别是Angular、React与Vue。


2.1 BAT公司的技术选型


一个好的技术框架选型应该参考优秀的BAT公司，让我们来通过boss直聘看一下这些大公司都用了什么技术框架。



对比图1


2.2前端开发三大框架的比较


既然BAT公司都提到了三大框架，那我们来比较一下各框架的优劣势。


2.2.1 Angular


Angular发展到2019年，已经出现第7版本，它可以媲美iPhone的更新速度，平均一年一个版本，而且不同版本的学习还都有一定的差异，最大的差异就是1和2的版本。Angular的2.0几乎是一个推翻重做的框架，估计不会有1.X的upgrade方案。所以如果现在新开始的项目采用Angular的话，会是一个很尴尬的时机。同样，如此大的改动似乎也反面印证了1.X并不是那么好。而angular的教程，一上来就是cli, npm, typescript，一大堆东西砸到你面前，每个东西他都要提一大段，连组件的理念，都要讲半天，教程门槛，一下子就被拉高了，导致学习成本很高。


众多程序员废弃原因：难调试+笨重。


2.2.2 React


对于跨平台应用程序开发，React Native是一个理想的选择，因为它提供了现代功能，您可以轻松地找到资源。


2.2.3 Vue


但是对于其他5％的人来说，Vue.js是超轻量级（但功能非常丰富）的框架，它们结合了AngularJS和React两者。


它实际上大部分与React类似，但模板与AngularJS（HTML + Mustache）几乎相同。


实际上，它与AngularJS有很大的不同，但从整体的角度来看，如果您有React或AngularJS经验，那么很容易理解。


渐进式构建能力是 vue.js 最大的优势，vue 有一个简洁而且合理的架构，使得它易于理解和构建。vue 有一个强大的充满激情人群的社区，这为 vue.js 增加了巨大的价值，使得为一个空白项目创建一个综合的解决方案变得十分容易。相对于国内来说，相当于华为手机的等级，学习成本比较亲民。


从特点上说，Vue有以下特点：


（1）API设计上简单，语法简单，学习成本低 ；


（2）构建方面不包含路由和ajax功能，使用vuex, vue-router ；


（3）指令（dom）和组件（视图，数据，逻辑）处理清晰 ；


（4）性能好，容易优化 ；


（5）基于依赖追踪的观察系统，并且异步队列更新 ；


（6）独立触发 ；


（7）v-model 实时渲染；


（8）适用于：模板和渲染函数的弹性选择 ；


（9）简单的语法及项目搭建 ；


（10）更快的渲染速度和更小的体积。


2.3 vue框架脱颖而出的原因


比较了三个框架后，我们最终在react和vue的选型上做决定，最后我们为什么选择了vue？这主要考虑以下几个方面。


（1）小程序可以使用mpvue , 公众号H5可以使用vux，app开发可以使用weex，PC端可以用nuxt.js，UI框架可以使用elementUI，以上框架都基于vue开发做到了跨平台，有更好的代码复用性，做到了开发习惯的统一；


（2）API文档简单，上手容易，学习成本比较亲民，华人开发，更接地气；


（3）BAT公司的招聘要求都有在使用该框架；


3、vue在各个平台上的技术选型


3.1 小程序的技术选型


3.1.1 wepy


一个类Vue开发风格的小程序框架


特性：


类Vue开发风格


支持组件化开发


支持NPM


支持Promise, 主动选择是否开启


支持ES2015


编译器：支持less/sass/TypeScript等开发


小程序性能优化


框架大小：24.3k+8.9k


wepy-redux数据管理


构建与编译工具：wepy-cli，编译配置：wepy.config.js


3.1.2 mpvue


命名意思：mp, mini program的缩写，mpvue, Vue.js in mini program


框架基于 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套 Vue.js 开发体验。


特性：


组件化开发


完整Vue.js开发体验，全部.vue单文件组件


Vuex数据管理方案


webpack构建机制：自定义构建策略、开发阶段hotReload


支持npm


使用 Vue.js 命令行工具 vue-cli 快速初始化项目


H5代码转换编译成小程序目标代码能力（可使用html开发）


构建与编译工具：vue-cli，编译配置：build


配套设施


mpvue-loader


mpvue-webpack-target


postcss-mpvue-wxss


px2rpx-loader


其他


3.1.3 选择mpvue的原因


特性对比





对比图2

以上技术对比，故mpvue更具优势。


3.3  App的技术选型


首选WEEX，其次是Flutter，再者是React native。


3.4  PC端的技术选型


Nuxt.js框架，解决服务器端渲染问题和首屏加载时长问题，实现 Vue


3.5  UI框架的技术选型


PC端：element-ui


APP端：view-ui、vux


3.6  CSS处理器的选型


Stylus，stylus在追求代码的整洁性上取得了优异性的胜利。


4、基于vue的框架nuxtjs的推荐


Nuxt.js简单的说是Vue.js的通用框架，最常用的就是用来作（服务器端渲染）。再直白点说，就是Vue.js原来是开发SPA（单页应用）的，但是随着技术的普及，很多人想用Vue开发多页应用，并在服务端完成渲染。这时候就出现了Nuxt.js这个框架，她简化了开发难度。还可以直接用命令把我们制作的vue项目生成为静态html。使用将带来大量的SEO提升，更好的用户体验和更多的机会（与传统的Vue SPA相比）。


4.1 服务器端渲染的好处


最主要的原因时SPA（单页应用）不利于搜索引擎的SEO操作。比如你作一个新闻网站，流量的一个主要来源是通过百度、谷歌、bing这些搜索引擎，但是它们对SPA的抓取并不好，特别是百度根本没法抓取到SPA的内容页面，所以我们必须把我们的应用在服务端渲染成适合搜索引擎抓取的页面，再下载到客户端。那Nuxt.js适合作新闻、博客、电影、咨询这样的需要搜索引擎提供流量的项目。如果你要作移动端的项目，就没必要使用这个框架了。（其实Nuxt.js个人觉的是一个解决方案）


4.（1）SEO 不同于SPA的HTML只有一个无实际内容的HTML和一个app.js，生成的HTML是有内容的，这让搜索引擎能够索引到页面内容。


（2）更快内容到达时间 传统的SPA应用是将bundle.js从服务器获取，然后在客户端解析并挂载到dom。而直接将HTML字符串传递给浏览器。大大加快了首屏加载时间。


4.2.2 Nuxt.js的特点


Nuxt.js的官方网站是这样介绍的：


Nuxt.js 是一个基于 Vue.js 的通用应用框架。 通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI渲染，它主要有以下特点。


（1）基于 Vue.js


（2）自动代码分层


（3）服务端渲染


（4）强大的路由功能，支持异步数据【使用更方便】


（5）静态文件服务


（6）ES6/ES7 语法支持


（7）打包和压缩 JS 和 CSS


（8）HTML头部标签管理


（9）本地开发支持热加载


（10）集成ESLint


（11）支持各种样式预处理器： SASS、LESS、 Stylus等等