nuxt 簡單介紹
背景
由於面試總被問到關於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 dev
2. 專案目錄
|-- 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 中的狀態。