有關ssr的概念和優點的相關理論可以參考我的另外一篇博客
這篇主要記錄一下如何從零創建一個nuxt項目
參考：nuxt.js官網
P1.項目創建
nuxt.js官網有推薦使用create-nuxt-app命令一步創建一個nuxt項目，windows的話這里推薦使用cmd，不要使用git bash（因為使用git bash時一些需要方向鍵進行選擇的時候根本看不到你現在選擇的是哪項，比較難受）
我選的配置如下：
如果npx不可用，可能時npm版本過低，可以使用npm init nuxt-app <你的項目名>
等安裝完成依賴，初始化的項目結構如下：
運行npm run dev就可以運行起來，如果初始化的項目都跑不起來，建議檢查一下自己的node或者npm版本是不是太低
P2. 路由
nuxt.js內置vue-router，不需要修改router.js文件，只需要在pages目錄下創建對應文件夾，nuxt.js會自動生成路由配置。
pages/test/index.vue 對應的路由為 /test
pages/test/_testName.vue 是動態路由，nuxt.js里_開頭的為動態路由，可以由params中接收傳參，對應路由為 /test/xx ，其中xx為傳遞的數據
跳轉至動態路由的代碼如下
testRoute() {
this.$router.push({ name: 'test-testName', // 動態拼接name params: { testName: Math.ceil(Math.random() * 10) // 參數key與路由名對應 } }) }
P3.數據請求
nuxt.js內置axios插件，在nuxt.js中配置使用 。對請求的配置可以參考官網文檔
modules: [
'@nuxtjs/axios' ]
可以在nuxt實例中訪問到它，即window.$nuxt.$axios
但注意window對象在服務端渲染期間是無法訪問到的，如果想在服務端渲染期間進行請求，axios對象還會在asyncData與fetch中的參數上下文對象context中訪問到，如
asyncData({ $axios }) {
// ...
} fetch({ $axios, store }) { // ... }
P4.fetch與asyncData
均在服務端渲染期間調用，支持請求完成后再展示首屏頁面
不同：
fetch用於更新vuex的state數據，asyncData可以更新組件內部數據。
相同：
1.都只在頁面組件(pages目錄下)下才會被調用，子組件的這兩個方法是沒用的。
2.都無法訪問到this，window，document
3.第一個參數都是上下文對象context，context 變量的可用屬性一覽:
| 屬性字段 | 類型 | 可用 | 描述 |
|---|---|---|---|
app |
Vue 根實例 | 客戶端 & 服務端 | 包含所有插件的 Vue 根實例。例如：在使用 axios 的時候，你想獲取 $axios 可以直接通過 context.app.$axios 來獲取 |
isClient |
Boolean |
客戶端 & 服務端 | 是否來自客戶端渲染（廢棄。請使用 process.client ） |
isServer |
Boolean |
客戶端 & 服務端 | 是否來自服務端渲染（廢棄。請使用 process.server ） |
isStatic |
Boolean |
客戶端 & 服務端 | 是否來自 nuxt generate 靜態化（預渲染）（廢棄。請使用 process.static ） |
isDev |
Boolean |
客戶端 & 服務端 | 是否是開發 dev 模式，在生產環境的數據緩存中用到 |
isHMR |
Boolean |
客戶端 & 服務端 | 是否是通過模塊熱替換 webpack hot module replacement (僅在客戶端以 dev 模式) |
route |
Vue Router 路由 | 客戶端 & 服務端 | Vue Router 路由實例 |
store |
Vuex 數據 | 客戶端 & 服務端 | Vuex.Store 實例。只有vuex 數據流存在相關配置時可用 |
env |
Object |
客戶端 & 服務端 | nuxt.config.js 中配置的環境變量，見 環境變量 api |
params |
Object |
客戶端 & 服務端 | route.params 的別名 |
query |
Object |
客戶端 & 服務端 | route.query 的別名 |
req |
http.Request |
服務端 | Node.js API 的 Request 對象。如果 Nuxt 以中間件形式使用的話，這個對象就根據你所使用的框架而定。nuxt generate 不可用 |
res |
http.Response |
服務端 | Node.js API 的 Response 對象。如果 Nuxt 以中間件形式使用的話，這個對象就根據你所使用的框架而定。nuxt generate 不可用 |
redirect |
Function |
客戶端 & 服務端 | 用這個方法重定向用戶請求到另一個路由。狀態碼在服務端被使用，默認 302 redirect([status,] path [, query]) |
error |
Function |
客戶端 & 服務端 | 用這個方法展示錯誤頁：error(params) 。params 參數應該包含 statusCode 和 message 字段 |
nuxtState |
Object |
客戶端 | Nuxt 狀態，在使用 beforeNuxtRender 之前，用於客戶端獲取 Nuxt 狀態，僅在 universal 模式下可用 |
beforeNuxtRender(fn) |
Function |
服務端 | 使用此方法更新 __NUXT__ 在客戶端呈現的變量，fn 調用 (可以是異步) { Components, nuxtState } ，參考 示例 |
兩個方法都必須做好錯誤捕獲，如果在執行過程中出現了錯誤，頁面會直接渲染失敗
P5.Plugins
plugins是在app實例化之前加載完成的插件庫，包括第三方插件或者自制插件，在nuxt.config.js中配置，通過ssr屬性設置是在服務端時加載還是在客戶端時加載（服務端加載時無window和document）。
配置參考如下：
plugins: [{
src: './node_modules/lib-flexible/flexible.js', // 移動端適配
ssr: false }, { src: '@/plugins/mint-ui.js', ssr: false }, { src: '@/plugins/lazyload.js', ssr: false }, { src: '@/plugins/vconsole.js', ssr: false }],
需要在plugins目錄下創建對應的文件，注意配置ssr為true時是無window對象的，因此如果需要window對象，需要將ssr設置為false
以引入vconsole為例
1.安裝vconsole依賴項
2.在plugins下創建vconsole.js，內容如下
import VConsole from 'vconsole'
const vc = process.env.NODE_ENV === 'development' ? new VConsole() : '' export default vc
3.在nuxt.config.js中plugins下配置如上，注意配置ssr為false，因為vconsole需要檢查和創建dom
P6.全局css與sass的全局樣式變量如何引入
nuxt.config.js中css屬性可以引入全局樣式文件、 模塊、第三方庫，如下
css: [{
src: 'mint-ui/lib/style.css', lang: 'css' }, { src: '~/assets/css/global.css', lang: 'css' }],
如果想引入sass的全局變量，需要啟用和配置styleResource：
/**
* 全局引入的其他樣式文件
* 路徑不能使用~和@
* See https://zh.nuxtjs.org/api/configuration-build/#styleresources
*/
styleResources: {
scss: './assets/css/index.scss', // less: ... // sass: ... },
P7.移動端適配
簡單粗暴的話，可以考慮引入lib-flexible和postcss-px2rem插件
lib-flexible或者amfe-flexible可以考慮npm安裝，也可以直接將它們的構建結果的js直接引入到項目中，然后在plugins中引入，ssr設為false，可以參考上面plugins配置
postcss-px2rem或者pxcss-pxtorem安裝之后，在nuxt.config.js中設置如下
build: {
postcss: [
require('postcss-px2rem')({ remUnit: 75, // 以設計稿750為參考 propList: ['*'] }), ], }
如果考慮自己實現，還需要處理nuxt的error頁面，不然報錯的時候emmmm
P8.部署
部署內容比較多，后續有時間了另整理一篇講部署的。
P9.緩存
提升nuxt項目性能的重要手段之一就是使用緩存。緩存是指在一段時間內不用重復計算，直接從緩存中取出來使用。可以分為幾個方面：組件數據緩存、api接口緩存、頁面緩存，參考下面那條鏈接，這一part主要實踐一下api接口緩存。
這一part記錄使用在現有nuxt項目中接入緩存，預計使用io-redis，參考資料如下：
https://juejin.cn/post/6844903623483195399