Nuxt.js服務端渲染入門

做者：太皇太后@毛豆前端

隨着Vue使用率的持續上長，愈來愈多的頁面都應用了瀏覽器渲染的方式，極大提高了前端的開發的質量和效率，可是也帶來了首屏渲染慢、SEO不友好及其餘一些問題。 基於Vue的SSR構架Nuxt.js很好的解決了這個問題，頁面直出，先後端同構，不只解決了首屏直出渲染、SEO等問題，在開發質量和效率也沒有任何損失。

1、Nuxt.js簡介

Nuxt.js是一個針對Vue的SSR框架，採用模塊化的架構，簡單易用，性能好。Nuxt.js的開發者積極活躍，版本迭代迅速，於2018年1月9日發佈了v1.0.0正式版本。並且獲得了Vue官網的大力推薦，接下來讓咱們一塊兒看看Nuxt.js的強大之處。

2、SSR模型創建

Nuxt.js 是一個基於vue.js的通用應用框架，其核心主要是經過vue-server-renderer模塊來實現服務端渲染。 vue-server-renderer是Vue服務端Node.js渲染的一個模塊，用來生成HTML內容。 使用步驟以下：

1. npm install vue vue-server-renderer --save-dev
2. 新建項目結構以下：

3. 在server.js文件中編寫代碼：

4. 在template.html編寫html，注意 <!—vue-ssr-outlet—> 這個必須寫，至關於佔位，服務端渲染的頁面內容填充到此。

5. 運行命令node server.js啓動服務

6. 瀏覽器打開http://localhost:3100/,會看到data-server-rendered = 「true」，表示是服務端渲染

那麼有了上面的例子，咱們再看看如何使用Nuxt.js來實現服務端頁面渲染。

3、建立一個Nuxt.js項目

1. 安裝

確保安裝了npx（npx在npm版本5.2.0默認安裝了）

• npx create-nuxt-app <項目名>
• npm install # or yarn
• npm run dev

通過以上三個步驟，打開瀏覽器，訪問localhost:3000，這跟建立一個Vue項目沒太多不一樣。項目目錄結構以下:

對於nuxt.js官網也給出了一個完整的服務器請求到渲染的流程圖

2. nuxt路由機制

pages目錄中的任何Vue組件都會基於他們的文件名稱和目錄結構自動添加到vue-router中。Nuxt能夠生成對應的路由配置，在.nuxt/rouer.js能夠體現出來,如圖：

嵌套路由：在pages下添加一個vue文件，同時添加一個與該文件同名的目錄用來存放子視圖組件

在父級vue文件內增長用於顯示子視圖內容

爲適應不一樣業務需求，還有動態路由，動態嵌套路由等功能 ，能夠參照官網說明：zh.nuxtjs.org/guide/routi…

3. assets和static靜態資源使用

assets包含未編譯的資源，與webpack如何加載和處理文件有更多關係，與nuxt如何工做沒有太多關係。

static包含一些映射到你的站點的根目錄的靜態文件。

好比：靜態資源放在assets下: < img src="~/assets/timg.jpeg"/>，若是靜態資源放在static下: < img src="timg.jpeg"/>

4. layouts使用

在layouts目錄下建立一個新的佈局，即.vue文件，代碼以下

使用佈局時，能夠在pages文件下script裏設置layout值爲佈局文件的名字

export default {

 layout: 'admin-layout'

}
複製代碼

注意：若是你輸入一個不正確的url，會顯示一個錯誤頁面。事實上，這個錯誤頁面是另一種佈局。nuxt有它本身的錯誤頁面佈局，可是若是你想要編輯它，只須要建立一個error.vue佈局，而後nuxt就會使用這個佈局代替默認的佈局

5. middleware使用

中間件（middleware）是容許你定義一個自定義函數（提供了一個context參數，能夠獲取sever端和client端各類信息）運行在一個頁面或佈局以前。好比咱們在渲染頁面以前判斷權限的攔截，或者根據用戶權限跳轉到相應的路由等。 就本地開發環境時跳轉到指定路由爲例，可這麼配置：

• 首先咱們須要在middleware文件夾中添加auth.js

• 在nuxt.config.js文件中配置

• 在瀏覽器打開localhost:3000/，此時會訪問到localhost:3000/dev

6. plugins

能夠配置須要在vue應用實例化以前須要運行的js插件，能夠是你本身寫的庫或是第三方庫。好比：對於axios這種ajax請求插件，element-ui第三方庫等。就element-ui爲例，能夠這麼配置：

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

• 在nuxt.config.js中配置plugins字段，只在客戶端運行時，可將引入的插件設置屬性ssr: false

7. next.config.js文件配置

• head 通常用於配置默認的meta標籤

• css 用於定義應用的全局樣式文件，模塊或第三方庫

• dev 配置是開發仍是生產模式

• loading 個性化定製must.js使用的加載組建

• env 定義用於客戶端和服務端的環境變量

……

更多可查看官網