前言
伺服器端渲染簡稱 SSR(server side render)，就是在伺服器端将資料和 HTML 融合後傳回給浏覽器，至于為什麼要使用服務端渲染呢？那就是為了SEO優化，如果你還不知道什麼是SEO優化那你真的坑了（趕緊科普去，這裡不做過多講解）。是以又有人問vue為什麼要服務端渲染，那是因為vue,angular,react等都為spa應用架構，按照正常的渲染，資料是異步渲染的，這樣的話不利于搜尋引擎爬蟲抓取，不信你看看頁面源碼裡是否有資料渲染。
接下來咱們要來介紹咱們今天的主角------nuxt.jsNuxt.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 檔案 或 目錄，如圖看本坑已上線項目部分檔案結構名：
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