作者：太皇太后@毛豆前端
隨著Vue使用率的持續上長，越來越多的頁面都應用了瀏覽器渲染的方式，極大提升了前端的開發的質量和效率，但是也帶來了首屏渲染慢、SEO不友好及其他一些問題。 基於Vue的SSR構架Nuxt.js很好的解決了這個問題，頁面直出，前後端同構，不僅解決了首屏直出渲染、SEO等問題，在開發質量和效率也沒有任何損失。
一、Nuxt.js簡介
Nuxt.js是一個針對Vue的SSR框架，採用模組化的架構，簡單易用，效能好。Nuxt.js的開發者積極活躍，版本迭代迅速，於2018年1月9日釋出了v1.0.0正式版本。而且得到了Vue官網的大力推薦，接下來讓我們一起看看Nuxt.js的強大之處。
二、SSR模型建立
Nuxt.js 是一個基於vue.js的通用應用框架，其核心主要是通過vue-server-renderer模組來實現服務端渲染。 vue-server-renderer是Vue服務端Node.js渲染的一個模組，用來生成HTML內容。 使用步驟如下：
- npm install vue vue-server-renderer --save-dev
- 新建專案結構如下：
- 在server.js檔案中編寫程式碼：
- 在template.html編寫html，注意 <!—vue-ssr-outlet—> 這個必須寫，相當於佔位，服務端渲染的頁面內容填充到此。
-
執行命令node server.js啟動服務
-
瀏覽器開啟http://localhost:3100/,會看到data-server-rendered = “true”，表示是服務端渲染
三、建立一個Nuxt.js專案
- 安裝
確保安裝了npx（npx在npm版本5.2.0預設安裝了）
- npx create-nuxt-app <專案名>
- npm install # or yarn
- npm run dev
經過以上三個步驟，開啟瀏覽器，訪問localhost:3000，這跟建立一個Vue專案沒太多不同。專案目錄結構如下:
- nuxt路由機制
pages目錄中的任何Vue元件都會基於他們的檔名稱和目錄結構自動新增到vue-router中。Nuxt可以生成對應的路由配置，在.nuxt/rouer.js可以體現出來,如圖：
在父級vue檔案內增加用於顯示子檢視內容
為適應不同業務需求，還有動態路由，動態巢狀路由等功能 ，可以參照官網說明：zh.nuxtjs.org/guide/routi…
- assets和static靜態資源使用
assets包含未編譯的資源，與webpack如何載入和處理檔案有更多關係，與nuxt如何工作沒有太多關係。
static包含一些對映到你的站點的根目錄的靜態檔案。
比如：靜態資源放在assets下: < img src="~/assets/timg.jpeg"/>，如果靜態資源放在static下: < img src="timg.jpeg"/>
- layouts使用
在layouts目錄下建立一個新的佈局，即.vue檔案，程式碼如下
export default {
layout: 'admin-layout'
}
複製程式碼注意：如果你輸入一個不正確的url，會顯示一個錯誤頁面。事實上，這個錯誤頁面是另外一種佈局。nuxt有它自己的錯誤頁面佈局，但是如果你想要編輯它，只需要建立一個error.vue佈局，然後nuxt就會使用這個佈局代替預設的佈局
- middleware使用
中介軟體（middleware）是允許你定義一個自定義函式（提供了一個context引數，可以獲取sever端和client端各種資訊）執行在一個頁面或佈局之前。比如我們在渲染頁面之前判斷許可權的攔截，或者根據使用者許可權跳轉到相應的路由等。 就本地開發環境時跳轉到指定路由為例，可這麼配置：
- 首先我們需要在middleware資料夾中新增auth.js
- 在nuxt.config.js檔案中配置
- 在瀏覽器開啟localhost:3000/，此時會訪問到localhost:3000/dev
可以配置需要在vue應用例項化之前需要執行的js外掛，可以是你自己寫的庫或是第三方庫。比如：對於axios這種ajax請求外掛，element-ui第三方庫等。就element-ui為例，可以這麼配置：
- 首先我們需要在plugins資料夾中新增外掛檔案element-ui.js
- 在nuxt.config.js中配置plugins欄位，只在客戶端執行時，可將引入的外掛設定屬性ssr: false
-
head 一般用於配置預設的meta標籤
-
css 用於定義應用的全域性樣式檔案，模組或第三方庫
-
dev 配置是開發還是生產模式
-
loading 個性化定製must.js使用的載入組建
-
env 定義用於客戶端和服務端的環境變數
……
更多可檢視官網