背景
由於面試總被問到關於ssr的問題，於是自己想搞一套服務端渲染。後來發現直接手動配置會有很多坑，與前端的朋友交流，給我推薦了nuxt，下面將研究的初步瞭解記錄下來。
簡介
Nuxt是基於Vue的一個應用框架，採用服務端渲染，使你的SPA應用(Vue)也可以擁有SEO。
實踐
1. 創建項目
$ npm install -g vue-cli
$ vue init nuxt/starter <project-name>
$ cd <project-name>
$ npm install
$ npm run dev2. 項目目錄
|-- assets // 用於組織未編譯的靜態資源如LESS、SASS或JavaScript
|-- components // 用於自己編寫的Vue組件，比如波動組件、日曆組件、分頁組件
|-- layouts // 佈局目錄，用於組織應用的佈局組件，不可更改
|-- middleware // 用於存放中間件
|-- pages // 用於存放寫的頁面，我們主要的工作區域
|-- plugins // 用於存放JavaScript插件的地方
|-- static // 用於存放靜態資源文件，比如圖片
|-- store // 用於組織應用的Vuex 狀態管理
|-- .editorconfig // 開發工具格式配置
|-- .eslintrc.js // ESLint的配置文件，用於檢查代碼格式
|-- .gitignore // 配置git不上傳的文件
|-- nuxt.config.json // 用於組織Nuxt.js應用的個性化配置，已覆蓋默認配置
|-- package-lock.json // npm自動生成，用於幫助package的統一設置的，yarn也有相同的操作
|-- package.json // npm 包管理配置文件
原理
Nuxt.js 通過一系列構建於 Vue.js 之上的方法進行服務端渲染，具體流程如下:
調用 nuxtServerInit 方法
當請求打入時，最先調用的即是 nuxtServerInit 方法，可以通過這個方法預先將服務器的數據保存，如已登錄的用戶信息等。另外，這個方法中也可以執行異步操作，並等待數據解析後返回。
Middleware 層
經過第一步後，請求會進入 Middleware 層，在該層中有三步操作：
讀取 nuxt.config.js 中全局 middleware 字段的配置，並調用相應的中間件方法 匹配並加載與請求相對應的 layout 調用 layout 和 page 的中間件方法
調用 validate 方法
在這一步可以對請求參數進行校驗，或是對第一步中服務器下發的數據進行校驗，如果校驗失敗，將拋出 404 頁面。
調用 fetch 及 asyncData 方法
這兩個方法都會在組件加載之前被調用，它們的職責各有不同， asyncData 用來異步的進行組件數據的初始化工作，而 fetch 方法偏重於異步獲取數據後修改 Vuex 中的狀態。