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等等