初識nuxt.js:用nuxt.js對現有vue專案進行SSR服務端渲染改造
最近用vue寫了公司部門的官網，但是spa單頁面應用首屏載入有些慢，體驗不好，而且SEO極不友好，於是學了學nuxt把專案改造成後端渲染。因為是第一次用nuxt，也遇上一些坑，在次記錄一下，加深印象。
1.什麼是nuxt.js？為什麼用它？
nuxt.js是一個基於 Vue.js 的通用應用框架，官網https://zh.nuxtjs.org/guide/有著詳細的說明，最常用的就是用來作SSR(伺服器渲染)。眾所周知，SPA單頁應用不利於搜尋引擎的SEO操作，因為SPA的HTML只有一個無實際內容的HTML和一個app.js，像百度等搜尋引擎很難抓取到頁面。而SSR生成的HTML是有內容的，可以設定全域性以及每個頁面的meta標籤內容，這讓搜尋引擎能夠索引到頁面內容。同時SSR直接將HTML字串傳遞給瀏覽器，也大大加快了首屏載入時間。
2.安裝
關於安裝，官網https://zh.nuxtjs.org/guide/installation也給出了詳細的步驟，跟著一步一步來就可以建立起一個新手模板,可以選擇服務端框架、UI框架、測試框架等等
3.專案目錄結構
下面左邊是vue專案目錄，右邊是nuxt專案目錄。
目錄說明：
1、assets
存放靜態資源，less、sess等，但是和static還是有一些區別的，assets裡的靜態資源會被webpack打包。
2、components
存放我們寫好的公共元件。
3、dist
通過執行npm run generate 生成的靜態目錄，靜態部署也是nuxt的一個創新。
4、layouts
組織應用的佈局元件。
5、middleware
中介軟體，現在暫時還沒使用過。
6、pages
佈局頁面元件，會自動根據pages下的目錄生成router.js檔案。
7、plugins
頁面中使用到的外掛，配置。
8、static
靜態檔案，不會被webpack打包
9、store
vuex的配置，暫時也還沒使用。
10、nuxt.config.js
nuxt的配置檔案，配置全域性head，loading，css，plugins，proxy等。
4.配置全域性CSS
在assets中新建全域性的css檔案，然後在nuxt.config.js中配置，nuxt中可以直接用@或者~來選擇src資料夾
5.配置外掛
用npm安裝外掛後需要在plugins資料夾中新建js檔案，然後import vue和所安裝外掛，使用vue.use()來安裝，最後在config中配置。ssr表示外掛需不需要後端渲染。
6.loading以及過渡動效配置
loading配置比較簡單，詳細請看https://zh.nuxtjs.org/api/configuration-loading
過渡動效只需在全域性css中寫這兩組類即可：
如果想給某個頁面自定義過渡特效的話，只要在該頁面元件中配置 transition 欄位即可：
具體可查官網
7.proxy代理配置
先安裝axios，然後再config配置
8.layout佈局
因為有之前的vue專案，所以佈局可以直接複製過來，要改的基本不多，<router-link>換成<nuxt-link>,<router-view>換成<nuxt>,別的基本不變
9.pages頁面檔案
頁面檔案也是直接從之前寫好的vue專案中複製過來的，改動也不多。需要注意的就是pages裡的檔案結構，因為nuxt的路由是根據pages裡的結果自動生成的。文件裡有詳細說明https://zh.nuxtjs.org/guide/routing，
這次專案也只用到了動態路由。
另外一個就是非同步資料 asyncData()，nuxt.js 擴充套件了 Vue.js，增加了一個叫 asyncData 的方法，使得我們可以在設定元件的資料之前能非同步獲取或處理資料，但是由於asyncData方法是在元件初始化前被呼叫的，所以在方法內是沒有辦法通過 this來引用元件的例項物件。asyncData也有很多用法，我比較習慣用async await，最後需要的資料需要return出去。
10.打包部署
Nuxt.js 提供了兩種釋出部署應用的方式：服務端渲染應用部署 和 靜態應用部署。
服務端渲染：
1.搭建nginx+node+npm+pm2環境
2.配置nginx代理監聽埠，package打包時埠，在nginx的 vhost裡新建一個主機繫結
3.npm run build 打包應用
4.上傳檔案
5.在伺服器上部署執行，執行npm install安裝依賴，行npm start 就可以執行起來nuxt的服務渲染
6.pm2開啟程序守護，執行pm2 start npm --name "my-nuxt" -- run start
靜態應用部署：tongs
執行npm run generate進行打包，打包後在dist資料夾中每個對應的頁面都會生成一個html，然後各種釋出操作和vue一樣的。這樣打包有一個弊端，當首屏的資料發生更改的時候，頁面顯示的還是之前的資料，要想改變的話，需要重新打包釋出才行。
遇到的一個問題：
Window 或 Document 物件未定義？
在專案中使用wow.js，就遇到了這個問題。原因是因為node服務端並沒有window 或 document 物件，所以會出現未定義。解決辦法是通過環境判斷來進行包的匯入
