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


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


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


我們主要從PC端、公眾號(hào)（移動(dòng)端H5）、小程序三大平臺(tái)進(jìn)行前端的技術(shù)選型，并來說說選其技術(shù)的幾大優(yōu)勢(shì)。


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


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


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


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



對(duì)比圖1


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


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


2.2.1 Angular


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


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


2.2.2 React


對(duì)于跨平臺(tái)應(yīng)用程序開發(fā)，React Native是一個(gè)理想的選擇，因?yàn)樗峁┝爽F(xiàn)代功能，您可以輕松地找到資源。


2.2.3 Vue


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


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


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


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


從特點(diǎn)上說，Vue有以下特點(diǎn)：


（1）API設(shè)計(jì)上簡(jiǎn)單，語(yǔ)法簡(jiǎn)單，學(xué)習(xí)成本低 ；


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


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


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


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


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


（7）v-model 實(shí)時(shí)渲染；


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


（9）簡(jiǎn)單的語(yǔ)法及項(xiàng)目搭建 ；


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


2.3 vue框架脫穎而出的原因


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


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


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


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


3、vue在各個(gè)平臺(tái)上的技術(shù)選型


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


3.1.1 wepy


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


特性：


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


支持組件化開發(fā)


支持NPM


支持Promise, 主動(dòng)選擇是否開啟


支持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 實(shí)現(xiàn)，使其可以運(yùn)行在小程序環(huán)境中，從而為小程序開發(fā)引入了整套 Vue.js 開發(fā)體驗(yàn)。


特性：


組件化開發(fā)


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


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


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


支持npm


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


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的原因


特性對(duì)比





對(duì)比圖2

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


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


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


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


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


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


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


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


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


4.2.2 Nuxt.js的特點(diǎn)


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


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


（1）基于 Vue.js


（2）自動(dòng)代碼分層


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


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


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


（6）ES6/ES7 語(yǔ)法支持


（7）打包和壓縮 JS 和 CSS


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


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


（10）集成ESLint


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