美團點評點餐 Nuxt.js 實戰

1、背景

在今年年初我開始接觸vue的時候，就發如今vue官方文檔中「服務端渲染」的一節中提到了Nuxt.js框架，SSR這種方式對於首屏的加載時間優化顯而易見，同時還能夠方便的進行SEO。美團點評的點餐業務中，數據平臺由於其數據量大的特色，首頁加載時間很長，很是適合進行SSR改造；因而，我在非工做時間對nuxt.js框架進行了嘗試，吃了一波螃蟹。本文對nuxt.js框架應用於生產環境進行了系統的論述，同時對所踩的坑也進行了必定的介紹。

官方對nuxt.js的介紹以下：

Properly configuring all the discussed aspects of a production-ready server-rendered app can be a daunting task. Luckily, there is an excellent community project that aims to make all of this easier: Nuxt.js. Nuxt.js is a higher-level framework built on top of the Vue ecosystem which provides an extremely streamlined development experience for writing universal Vue applications. Better yet, you can even use it as a static site generator (with pages authored as single-file Vue components)! We highly recommend giving it a try.

能夠看出，vue官方對於nuxt.js的態度很是積極，仍是值得你們嘗試的，目前最新版本：1.0.0-rc2；1.0正式版即將發佈，撒花！

因本文做者水平所限，若有錯誤，歡迎拍磚。

2、nuxt.js 簡單介紹

一、nuxt.js的原理圖：

具體的原理介紹官網有詳細的解釋，歡迎讀者移步官網，這裏再也不復述。

二、nuxt.js的優點

1）就是咱們無需爲了路由劃分而煩惱，你只須要按照對應的文件夾層級建立 .vue 文件就行

2）無需考慮數據傳輸問題，nuxt 會在模板輸出以前異步請求數據（須要引入 axios 庫），並且對 vuex 有進一步的封裝

3）內置了 webpack，省去了配置 webpack 的步驟，nuxt 會根據配置打包對應的文件

3、技術棧選型

一、nuxt.js：0.10.6

二、axios：0.16.2 → 選擇axios的緣由很簡單，它是vue官方推薦的包，而且axios能夠運行於瀏覽器端和服務器端，減小了前端工程師的學習成本。

三、elementUI：1.3.7 → elementUI是基於vue的很全面的ui組件庫，對於一個本身的驗證項目很合適，能夠快速開發，快速上線。

4、實施方案

工程的目錄結構以下：

一、插件安裝

你能夠配置須要在「根vue.js應用」實例化以前須要運行的js插件，固然能夠是你本身寫的或第三方模塊。

注意：在任何vue組件的生命週期內，只有beforeCreate和created這兩個鉤子會在瀏覽器端和服務端均被調用；其餘的鉤子都只會在瀏覽器端調用。

1）對於axios這種ajax請求插件，無疑會使用在頁面的方方面面中，那麼若是在每一個頁面中使用import方式進行引入，會致使在打包的時候打包屢次。而實際上咱們只須要打包一次，能夠經過在nuxt.config.js裏面的build.vendor來解決。

固然，若是你須要區分測試環境和線上環境的接口地址，就須要在plugins文件中對axios進行編寫，如圖：

2）使用vue插件 - elementUI

普通的npm包的引入方式如上面的axios所述，那麼vue插件咱們該怎麼處理呢？

1. 首先咱們須要在plugins文件夾中添加插件文件，element-ui.js
   

   
   

   
   

2. 在nuxt.config.js中配置plugins字段
   

   
   

3. 因爲elementUI是第三方庫，咱們須要把它打包到庫文件裏面以得到更好的緩存效果。在nuxt.config.js中配置element-ui便可。
   

   
   

3）同時nuxt還支持區分只在瀏覽器中運行和只在服務端運行的插件。

1. 只在瀏覽器運行：配置nuxt.config.js中plugins字段，將引入的插件屬性設置爲ssr： false
   

   
   

2. 只在服務端運行：直接在webpack打包server.bundle.js文件中，將process.SERVER_BUILD設置爲true便可

二、layout佈局

nuxt.js實現了一個新的概念，layout佈局，咱們能夠經過layout佈局方便的實現頁面的多個佈局之間方便的切換。本項目中實現了三種經常使用的佈局，即：1）兩欄佈局，左欄固定，右欄動態寬度；二、錯誤頁提示，頁面中間一個提示框的佈局方案；三、純白頁面佈局。

以兩欄佈局舉例：

1. 首先，在layout → default.vue中編寫默認佈局
   

   
   

   layout與頁面的具體內容的插口即：nuxt標籤
2. 具體開發的頁面中，若是使用默認佈局，則不需指定頁面的佈局，nuxt框架會自動對沒有指定佈局的頁面和default佈局進行關聯。若是須要指定佈局，則在layout字段中對佈局進行指定。如圖在login頁面中對full佈局進行了指定。
   

   
   

注：我的開發感覺：layout佈局對於頁面類型多變的工程頗有好處，咱們能夠減小冗餘代碼，而且方便開發人員在多個佈局中簡單切換。nuxt框架將頁面分層劃分爲3層：一、佈局；二、頁面；三、組件

這麼劃分邏輯上更清楚，也更貼近組件化頁面開發的思想。

PS：我的在非vue項目中也自行實現了一個簡單的layout佈局，使用slot插口便可實現。

layout文件提供slot插口

在開發頁面中將layout文件以組件的方式引入便可。

三、server端api編寫

nuxt的server端使用的是express，故server端api直接編寫express router便可。server端目錄組織如圖：

server/index.js 文件是express的啓動文件，plugins和middleware文件是axios的配置，api文件夾內即api接口。

server/index.js文件裏面對api引用以下：

咱們先看看axios的配置，經過對process.env的匹配來區分線上與測試環境，同時在middleware文件中對接口進行鑑權。

以後在api/index.js文件中對各接口進行引用和聚合

在全部接口文件中，以announcement.js舉例：

能夠看到爲了實現簡便和避免過分設計，api接口沒有對數據進行從新封裝，直接進行了透傳處理。

四、頁面路由

nuxt框架的頁面路由使用了vue-router，可是咱們不須要對頁面的路由進行過多的操心，由於咱們只要按照nuxt規範的頁面文件目錄結構進行設計，就能夠自動生成vue-router文件。或者說咱們存放頁面的目錄結構會直接影響最終生成的路由配置。

本項目的頁面目錄結構如圖所示：

而生成的router文件爲：

能夠看出生成的路由與pages文件夾目錄結構是一一對應的。

注意：其中帶參數的動態路由，須要建立對應的下劃線做爲前綴的vue文件或目錄。例如圖中bidDetail/_id.vue文件，最終生成的路由即爲：path: "/bidDetail/:id?"。

5、總結

從頭搭建一個服務端渲染的框架實際上是至關複雜的，不過有了nuxt.js後，咱們能夠很輕易的搭建出一個可擴展可定製的SSR框架，這大大的減小了咱們搭建框架的時間成本。由於nuxt的官方文檔寫的足夠詳細，我沒有對安裝這類常規項進行描述，直接從插件安裝、新概念 - layout佈局、server端api、pages的組織入手，介紹了我在項目實戰中使用nuxt框架的一些關鍵路徑。目前項目上線在aws跑了半個多月，整體穩定，說明雖然nuxt不是1.0版本，可是也足夠用於生產實踐了。（考慮到github上說。nuxt的1.0版本即將到來，咱們有理由期待vue的SSR前景）

因爲本文做者水平與篇幅所限，不能對項目中的全部細節盡述，對nuxt感興趣的讀者能夠郵件聯繫：wangxinghang@meituan.com，感謝~