最近用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 對象，所以會出現未定義。解決辦法是通過環境判斷來進行包的導入
