相關閱覽
Nuxt.js簡介
Nuxt.js 是一個基於 Vue.js 的輕量級應用框架,可用來創建服務端渲染 (SSR) 應用,也可充當靜態站點引擎生成靜態站點應用,具有優雅的代碼結構分層和熱加載等特性。
服務端渲染（SSR）
利用 SSR（Server-Side Rendering），Node.js 服務器 將基於 Vue 的組件渲染成 HTML 並傳輸到客戶端，而不是純 javascript。 與傳統的 Vue SPA 相比，使用 SSR 將帶來巨大的 SEO（搜索引擎優化） 提升、更好的用戶體驗和更多的機會。
生成靜態站點
Nuxt.js 支持基於 Vue 應用程序生成靜態站點。這是“兩全其美”的， 因為你不要服務器，但是仍能獲得 SEO 的好處，這是因為 Nuxt 將預先渲染所有頁面，並且包括必要的 HTML。
支持 Vue.js 應用的靜態化算是 Nuxt.js 的一個創新點，通過 nuxt generate 命令實現。該命令依據應用的路由配置將每一個路由靜態化成為對應的 HTML 文件。
靜態化可以讓你在任何一個靜態站點服務商托管你的Web應用。
我們進一步考慮下電商應用的場景，利用 nuxt generate，是不是可以將應用靜態化后部署在 CDN 服務器，每當一個商品的庫存發生變化時，就重新靜態化下，更新下商品的庫存。但是如果用戶訪問的時候恰巧更新了呢？我們可以通過調用電商的 API ，保證用戶訪問的是最新的數據。這樣相對於傳統的電商應用來說，這種靜態化的方案可以大大節省服務器的資源。
NUxt.js流程圖
nuxtServerInit服務器初始化
在Nuxt.js中只有page里的組件有fetch和asyncData方法，所以當我們使用layout布局頁面時如果組件需要請求數據，就無法渲染了，解決方法是在nuxtServerInit方法里初始化組件內的數據。
如果你使用_狀態樹模塊化_的模式，只有主模塊（即 store/index.js）適用設置該方法（其他模塊設置了也不會被調用）。
實際上nuxtServerInit用於在服務端操作 store 的，實質上就是一個 Action。
middleware中間件運行
這個函數可以使用在nuxt.config.js、layouts、pages中使用，會在頁面初始化之前被調用。
validate()校驗參數
可以讓你在動態路由對應的頁面組件中配置一個校驗方法用於校驗動態路由參數的有效性。比如對路由參數驗證失敗，判定為一個非法參數后，跳轉到404頁面或者一個提醒頁面。
asyncData()和fetch()
asyncData()
asyncData方法會在組件（限於頁面組件）每次加載之前被調用。它可以在服務端或路由更新之前被調用。在這個方法被調用的時候，第一個參數被設定為當前頁面的上下文對象，你可以利用 asyncData方法來獲取數據並返回給當前組件。
通俗解釋：asyncData其實是運行在page頁面加載前的一個方法，這個方法只能在頁面組件中使用，這個方法的作用很多，比如：ajax數據請求、操作state數據、頁面重定向等等。
這里涉及到一點，單純用vue的時候，可以用在created生命周期階段進行ajax數據的請求，只是這樣的話查看源代碼的時候就看不到這些數據。也就實現了服務端渲染
fetch()
asyncData既可以充應用的狀態樹（store）數據，也可以設置組件的數據。
fetch 方法用於在渲染頁面前填充應用的狀態樹（store）數據， 與 asyncData 方法類似，不同的是它不會設置組件的數據。
render
渲染頁面
流程圖圖示
下圖闡述了 Nuxt.js 應用一個完整的服務器請求到渲染（或用戶通過
