vue玉女心經之服務端渲染nuxt.js的使用

前言

服務器端渲染簡稱 SSR(server side render)，就是在服務器端將數據和 HTML 融合後返回給瀏覽器，至於爲何要使用服務端渲染呢？那就是爲了SEO優化，若是你還不知道什麼是SEO優化那你真的坑了（趕忙科普去，這裏不作過多講解）。所以又有人問vue爲何要服務端渲染，那是由於vue,angular,react等都爲spa應用框架，按照常規的渲染，數據是異步渲染的，這樣的話不利於搜索引擎爬蟲抓取，不信你看看頁面源碼裏是否有數據渲染。

接下來我們要來介紹我們今天的主角------nuxt.js

Nuxt.js 是一個基於 Vue.js 的通用應用框架，預設了利用 Vue.js 開發服務端渲染的應用所須要的各類配置。

NUXT 能爲咱們作什麼

• 無需再爲了路由劃分而煩惱，你只須要按照對應的文件夾層級建立 .vue 文件就行

• 無需考慮數據傳輸問題，nuxt 會在模板輸出以前異步請求數據（須要引入 axios 庫），並且對 vuex 有進一步的封裝

• 內置了 webpack，省去了配置 webpack 的步驟，nuxt 會根據配置打包對應的文件

安裝流程

$ npm install -g vue-cli
 
$ vue init nuxt/starter <project-name>
$ cd <project-name>
$ npm install
 
$ npm run dev複製代碼

項目目錄：

.nuxt // Nuxt自動生成，臨時的用於編輯的文件，build

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 包管理配置文件

看到這裏不少兄弟姐妹會疑問怎麼沒有main入口文件，nuxt沒有main.js入口文件，項目初始化的操做須要經過 nuxt.config.js 進行配置指定，nuxt.config.js主要屬性：

1.build--eslint語法檢查器配置,axios，css預編譯等配置；

2.serverMiddleware--中間件配置

3.env---可用於配置全局參數

4.head:統一配置默認的meta，title，link等標籤

5.css--配置ui框架

6.plugins--配置全局插件，如：swiper,彈窗插件，http攔截器等插件

路由:

Nuxt.j不須要手動建立路由，會根據依據pages目錄結構自動生成vue-router模塊的路由配置，在 Nuxt.js 裏面定義帶參數的動態路由，須要建立對應的如下劃線做爲前綴的 Vue 文件 或 目錄，如圖看本坑已上線項目部分文件結構名：

router: {
  routes: [        {            path: "/",            component: _75464a0a,            name: "index"        },        {            path: "/:goodsList",            component: _6c9603d5,            name: "goodsList"        },        {            path: "/:goodsList/goodsList",            component: _69c399d0,            name: "goodsList-goodsList"        },        {            path: "/:goodsList/:categoryId/:type?/:goodsListActivity?",            component: _291bf412,            children: [                {                    path: "",                    component: _47cd360a,                    name: "goodsList-categoryId-type-goodsListActivity"                }            ]        }        .......
  ]
}複製代碼

項目目錄：

Nuxt.js 經過一系列構建於 Vue.js 之上的方法進行服務端渲染，具體流程以下:

調用 nuxtServerInit 方法

當請求打入時，最早調用的便是 nuxtServerInit 方法，能夠經過這個方法預先將服務器的數據保存，如已登陸的用戶信息等。另外，這個方法中也能夠執行異步操做，並等待數據解析後返回。

Middleware 層

通過第一步後，請求會進入 Middleware 層，在該層中有三步操做：

讀取 nuxt.config.js 中全局 middleware 字段的配置，並調用相應的中間件方法 匹配並加載與請求相對應的 layout 調用 layout 和 page 的中間件方法

調用 validate 方法

在這一步能夠對請求參數進行校驗，或是對第一步中服務器下發的數據進行校驗，若是校驗失敗，將拋出 404 頁面。

調用 fetch 及 asyncData 方法

這兩個方法都會在組件加載以前被調用，它們的職責各有不一樣， asyncData 用來異步的進行組件數據的初始化工做，而 fetch 方法偏重於異步獲取數據後修改 Vuex 中的狀態。

asyncData示例：

如上圖，數據獲取並輕輕以後必定得return出去才能使用，並且async函數return是一個object。

結尾：

好了，到這裏基本就把nuxt的搭建，基本目錄結構，路由等介紹完了，已經解決的基本使用，後續將對nuxt的打包部署上線及使用nuxt的優點進行講解，想要知道更多請持續關注本坑公衆號，若是在使用或者項目開發過程當中有不懂或者想要一塊兒探討的兄弟姐妹們，歡迎來撩哈！

我愛你，那於小說是當成着年怕騎車，雖每盧中道好沒着年快來起得用地多那容易摔倒，來起得用地我也能夠不顧一切的騎上它，當生如路聲道面有狗追我或者你在前面等我。

                                                            The End

                                 若是你喜歡，記得關注大坑公衆號【入坑互聯網】