1、技術(shù)選型的背景


前端技術(shù)發(fā)展日新月異，互聯(lián)網(wǎng)上出現(xiàn)的新型框架也比較多，如何讓新招聘的人員能夠直接上手接替項目，或者有相關(guān)人員請假，替補人員的接替工作，如何做到不同前端工程師的開發(fā)的差異性更小，是我們公司應(yīng)該考慮的一個問題。


BAT公司的招聘要求都提到了“至少熟悉React、Vue、Angular其中一種前端MVVM框架，有前端工程化與模塊化開發(fā)實踐經(jīng)驗”相關(guān)字眼。


我們主要從PC端、公眾號（移動端H5）、小程序三大平臺進行前端的技術(shù)選型，并來說說選其技術(shù)的幾大優(yōu)勢。


2、VUE技術(shù)的優(yōu)勢


互聯(lián)網(wǎng)前端大潮后，前端出現(xiàn)了3大框架，分別是Angular、React與Vue。


2.1 BAT公司的技術(shù)選型


一個好的技術(shù)框架選型應(yīng)該參考優(yōu)秀的BAT公司，讓我們來通過boss直聘看一下這些大公司都用了什么技術(shù)框架。



對比圖1


2.2前端開發(fā)三大框架的比較


既然BAT公司都提到了三大框架，那我們來比較一下各框架的優(yōu)劣勢。


2.2.1 Angular


Angular發(fā)展到2019年，已經(jīng)出現(xiàn)第7版本，它可以媲美iPhone的更新速度，平均一年一個版本，而且不同版本的學(xué)習(xí)還都有一定的差異，最大的差異就是1和2的版本。Angular的2.0幾乎是一個推翻重做的框架，估計不會有1.X的upgrade方案。所以如果現(xiàn)在新開始的項目采用Angular的話，會是一個很尷尬的時機。同樣，如此大的改動似乎也反面印證了1.X并不是那么好。而angular的教程，一上來就是cli, npm, typescript，一大堆東西砸到你面前，每個東西他都要提一大段，連組件的理念，都要講半天，教程門檻，一下子就被拉高了，導(dǎo)致學(xué)習(xí)成本很高。


眾多程序員廢棄原因：難調(diào)試+笨重。


2.2.2 React


對于跨平臺應(yīng)用程序開發(fā)，React Native是一個理想的選擇，因為它提供了現(xiàn)代功能，您可以輕松地找到資源。


2.2.3 Vue


但是對于其他5％的人來說，Vue.js是超輕量級（但功能非常豐富）的框架，它們結(jié)合了AngularJS和React兩者。


它實際上大部分與React類似，但模板與AngularJS（HTML + Mustache）幾乎相同。


實際上，它與AngularJS有很大的不同，但從整體的角度來看，如果您有React或AngularJS經(jīng)驗，那么很容易理解。


漸進式構(gòu)建能力是 vue.js 最大的優(yōu)勢，vue 有一個簡潔而且合理的架構(gòu)，使得它易于理解和構(gòu)建。vue 有一個強大的充滿激情人群的社區(qū)，這為 vue.js 增加了巨大的價值，使得為一個空白項目創(chuàng)建一個綜合的解決方案變得十分容易。相對于國內(nèi)來說，相當(dāng)于華為手機的等級，學(xué)習(xí)成本比較親民。


從特點上說，Vue有以下特點：


（1）API設(shè)計上簡單，語法簡單，學(xué)習(xí)成本低 ；


（2）構(gòu)建方面不包含路由和ajax功能，使用vuex, vue-router ；


（3）指令（dom）和組件（視圖，數(shù)據(jù)，邏輯）處理清晰 ；


（4）性能好，容易優(yōu)化 ；


（5）基于依賴追蹤的觀察系統(tǒng)，并且異步隊列更新 ；


（6）獨立觸發(fā) ；


（7）v-model 實時渲染；


（8）適用于：模板和渲染函數(shù)的彈性選擇 ；


（9）簡單的語法及項目搭建 ；


（10）更快的渲染速度和更小的體積。


2.3 vue框架脫穎而出的原因


比較了三個框架后，我們最終在react和vue的選型上做決定，最后我們?yōu)槭裁催x擇了vue？這主要考慮以下幾個方面。


（1）小程序可以使用mpvue , 公眾號H5可以使用vux，app開發(fā)可以使用weex，PC端可以用nuxt.js，UI框架可以使用elementUI，以上框架都基于vue開發(fā)做到了跨平臺，有更好的代碼復(fù)用性，做到了開發(fā)習(xí)慣的統(tǒng)一；


（2）API文檔簡單，上手容易，學(xué)習(xí)成本比較親民，華人開發(fā)，更接地氣；


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


3、vue在各個平臺上的技術(shù)選型


3.1 小程序的技術(shù)選型


3.1.1 wepy


一個類Vue開發(fā)風(fēng)格的小程序框架


特性：


類Vue開發(fā)風(fēng)格


支持組件化開發(fā)


支持NPM


支持Promise, 主動選擇是否開啟


支持ES2015


編譯器：支持less/sass/TypeScript等開發(fā)


小程序性能優(yōu)化


框架大小：24.3k+8.9k


wepy-redux數(shù)據(jù)管理


構(gòu)建與編譯工具：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 實現(xiàn)，使其可以運行在小程序環(huán)境中，從而為小程序開發(fā)引入了整套 Vue.js 開發(fā)體驗。


特性：


組件化開發(fā)


完整Vue.js開發(fā)體驗，全部.vue單文件組件


Vuex數(shù)據(jù)管理方案


webpack構(gòu)建機制：自定義構(gòu)建策略、開發(fā)階段hotReload


支持npm


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


H5代碼轉(zhuǎn)換編譯成小程序目標(biāo)代碼能力（可使用html開發(fā)）


構(gòu)建與編譯工具：vue-cli，編譯配置：build


配套設(shè)施


mpvue-loader


mpvue-webpack-target


postcss-mpvue-wxss


px2rpx-loader


其他


3.1.3 選擇mpvue的原因


特性對比





對比圖2

以上技術(shù)對比，故mpvue更具優(yōu)勢。


3.3 ?App的技術(shù)選型


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


3.4 ?PC端的技術(shù)選型


Nuxt.js框架，解決服務(wù)器端渲染問題和首屏加載時長問題，實現(xiàn) Vue


3.5 ?UI框架的技術(shù)選型


PC端：element-ui


APP端：view-ui、vux


3.6 ?CSS處理器的選型


Stylus，stylus在追求代碼的整潔性上取得了優(yōu)異性的勝利。


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


Nuxt.js簡單的說是Vue.js的通用框架，最常用的就是用來作（服務(wù)器端渲染）。再直白點說，就是Vue.js原來是開發(fā)SPA（單頁應(yīng)用）的，但是隨著技術(shù)的普及，很多人想用Vue開發(fā)多頁應(yīng)用，并在服務(wù)端完成渲染。這時候就出現(xiàn)了Nuxt.js這個框架，她簡化了開發(fā)難度。還可以直接用命令把我們制作的vue項目生成為靜態(tài)html。使用將帶來大量的SEO提升，更好的用戶體驗和更多的機會（與傳統(tǒng)的Vue SPA相比）。


4.1 服務(wù)器端渲染的好處


最主要的原因時SPA（單頁應(yīng)用）不利于搜索引擎的SEO操作。比如你作一個新聞網(wǎng)站，流量的一個主要來源是通過百度、谷歌、bing這些搜索引擎，但是它們對SPA的抓取并不好，特別是百度根本沒法抓取到SPA的內(nèi)容頁面，所以我們必須把我們的應(yīng)用在服務(wù)端渲染成適合搜索引擎抓取的頁面，再下載到客戶端。那Nuxt.js適合作新聞、博客、電影、咨詢這樣的需要搜索引擎提供流量的項目。如果你要作移動端的項目，就沒必要使用這個框架了。（其實Nuxt.js個人覺的是一個解決方案）


4.（1）SEO 不同于SPA的HTML只有一個無實際內(nèi)容的HTML和一個app.js，生成的HTML是有內(nèi)容的，這讓搜索引擎能夠索引到頁面內(nèi)容。


（2）更快內(nèi)容到達時間 傳統(tǒng)的SPA應(yīng)用是將bundle.js從服務(wù)器獲取，然后在客戶端解析并掛載到dom。而直接將HTML字符串傳遞給瀏覽器。大大加快了首屏加載時間。


4.2.2 Nuxt.js的特點


Nuxt.js的官方網(wǎng)站是這樣介紹的：


Nuxt.js 是一個基于 Vue.js 的通用應(yīng)用框架。 通過對客戶端/服務(wù)端基礎(chǔ)架構(gòu)的抽象組織，Nuxt.js 主要關(guān)注的是應(yīng)用的 UI渲染，它主要有以下特點。


（1）基于 Vue.js


（2）自動代碼分層


（3）服務(wù)端渲染


（4）強大的路由功能，支持異步數(shù)據(jù)【使用更方便】


（5）靜態(tài)文件服務(wù)


（6）ES6/ES7 語法支持


（7）打包和壓縮 JS 和 CSS


（8）HTML頭部標(biāo)簽管理


（9）本地開發(fā)支持熱加載


（10）集成ESLint


（11）支持各種樣式預(yù)處理器： SASS、LESS、 Stylus等等