寫在開頭
大家好，這裏是lionLoveVue，基礎知識決定了編程思維，學如逆水行舟，不進則退。金三銀四，爲了面試也還在慢慢積累知識，Github上面可以直接查看所有前端知識點梳理，github傳送門，覺得不錯，點個Star★，好運連連，Offer終究鼠於你，持續更新中。另外，也可以關注微信公衆號：小獅子前端Vue，源碼以及資料今後都會放在裏面。
Nuxt.js基礎
Nuxt.js 是一個基於Vue.js的通用應用框架，預設了利用Vue.js開發服務端渲染的應用所需要的各種配置。
基於Vue 2做的，包括Vue-Router，支持Vuex、Vue Server Render、vue-meta
Nuxt.js工作流
下圖源自Nuxt官網，簡單介紹一下它的工作流程
參考：nuxtjs 中文文檔
從瀏覽器發出一個請求，到最終服務端渲染完成，關於Nuxt的生命週期如下：
Incoming Request瀏覽器發送一個請求- 服務端檢查是否有
nuxtServerInit配置項，有的話就會執行這個函數，其中包含一個標註：Store action用來操作vuex - 下一個環節就是中間件
middleware，與路由相關，做任何你想要的功能 - 預驗證
validate()可以配合高級動態路由，做一些驗證，比如是否允許跳轉某個頁面 asyncData() & fetch()獲取數據，前一個是用來渲染vue component，即 vue組件的，後一個通常用來修改vuex，即Store的- 有了數據，模板後，最後一步就是
Render渲染了，方式是SSR
Nuxt.js 安裝
如果沒有安裝vue cli的話，先全局安裝一下
npm/cnpm install -g @vue/cli-init
vue init nuxt-community/koa-template nuxt_learn（這裏填入你自己的文件名）
安裝完成後，依次執行如下命令
cd nuxt_learn
npm install # Or yarn
npm install --update-binary
npm install ajv@^6（可選項，如果有報warn，就裝一下）
npm run dev
如果安裝過程網絡有問題，報錯了，可以試試用 cnpm或者
nrm use cnpm
eslint版本問題： 需要更新eslint版本
解決：執行如下代碼：
npm install eslint-plugin-html@^3
執行完如下步驟後，最後一步，打開服務：
npm run dev
babel編譯版本有問題： 解決辦法是升級[email protected]到[email protected]
npm install backpack-core@0.7.0 --save-dev
解決上述問題後，編譯能成功，但是客戶端依舊運行報錯
解決辦法是：在nuxt.config.js裏找到eslint-loader將ctx.isClient改成ctx.Client就可以運行了
參考：解決vue init nuxt-community/koa-template項目，安裝報錯問題
解決完上述問題後，執行如下指令：
npm run dev
訪問：http://localhost:3000/ 出現如下界面，代表配置成功 ✿✿ヽ(°▽°)ノ✿
附：微信公衆號：【小獅子前端】 回覆【nuxt-learn】即可獲取本節源碼
知識拓展
當使用 SSR 時， mounted 只在瀏覽器端渲染，而在服務器端不會渲染 ：瀏覽器通過axios請求的數據，只有 created 在開啓SSR時會執行。
SSR原理：① 服務器端將編譯好的內容（模板）下發（包括樣式、內容、數據） ② 把異步獲取的數據響應給瀏覽器端（把交互交給瀏覽器來完成）
SSR原理深入
我們打開頁面源代碼，查看一下：
服務器端渲染完頁面後給瀏覽器端的html分了幾個部分，第一個是樣式 style ，第二個是模板內容，例如上圖中圈中的藍色部分，第三個是服務端拿到的數據結果，例如上圖中圈中的紅色部分，爲什麼服務端拿到的數據給到瀏覽器端呢？
這裏我們得思考一個SSR的工作原理 了
如果不給數據的話，就是一個靜態html模板，一個靜態的內容，沒有任何交互，那交互是在哪完成的呢？
交互是在瀏覽器端完成的，也就是說瀏覽器端會有一個入口，進行預編譯，但不會再渲染頁面了，因爲服務器端已經在頁面渲染過一次了。它要做的是創建一個虛擬的編譯結果（可以理解爲虛擬dom）， 和服務器端傳過來的結果進行對比，如果有區別，它會重新請求數據。在nuxt項目中都是一套文件，沒有特別指定是在瀏覽器端運行還是服務端運行，也就是SSR常說的同構，瀏覽器端編譯虛擬dom，也依賴於 vue 文件，因此模板是有的，而編譯這個dom，需要的是額外的數據，此數據是服務器端渲染之前請求而來的數據，如果數據不同步在瀏覽器端，編譯出來的結果必然和服務器端編譯結果不一致。
綜上，服務器端異步獲取的數據會同步在瀏覽器端，作對比，如果對比一致的話，瀏覽器端就會對對應的dom結點註冊事件，達到交互作用。
以上，就是我們項目搭建所需的基礎知識啦，已經整理完結啦，當然還有許多地方沒有提及，讀者可以去查閱一些官方文檔來補充更多知識，下文我們將逐步深入全棧開發過程記錄，製作不易，點贊收藏評論，一鍵三連一波~
結尾
如若本文有瑕疵需修改的地方，請提出來，謝謝您的貢獻！
歡迎關注微信公衆號：小獅子前端Vue
謝謝您的支持！✿✿ヽ(°▽°)ノ✿
學如逆水行舟，不進則退