今天打算重新從頭學習nuxt，根據文檔來總結一下需要注意的小知識點：
1、
請注意: 從Nuxt 2.0開始，~/alias將無法在CSS文件中正確解析。你必須在url CSS引用中使用~assets（沒有斜杠）或@別名，即background:url("~assets/banner.svg")
2、
組件目錄 components 用於組織應用的 Vue.js 組件。Nuxt.js 不會擴展增強該目錄下 Vue.js 組件，即這些組件不會像頁面組件那樣有 asyncData 方法的特性。
3、
布局目錄 layouts 用於組織應用的布局組件。
若無額外配置，該目錄不能被重命名。
4、
你可以定制化 Nuxt.js 默認的應用模板。
定制化默認的 html 模板，只需要在src文件夾下（默認是應用根目錄）創建一個 app.html 的文件。
默認模板為：
默認模板為： <!DOCTYPE html> <html {{ HTML_ATTRS }}> <head {{ HEAD_ATTRS }}> {{ HEAD }} </head> <body {{ BODY_ATTRS }}> {{ APP }} </body> </html>
根據文檔說明，我們可以在項目根目錄下創建一個app.html來自定義模板
5、
Nuxt.js 允許你擴展默認的布局，或在 layout 目錄下創建自定義的布局。
layouts 目錄中的每個文件 (頂級) 都將創建一個可通過頁面組件中的 layout 屬性訪問的自定義布局。
假設我們要創建一個 博客布局 並將其保存到layouts/blog.vue:
<template> <div> <div>我的博客導航欄在這里</div> <nuxt/> </div> </template>
然后我們必須告訴頁面 (即pages/blog.vue) 使用您的自定義布局：
<template> <div> 我是博客頁面 </div> </template> <script> export default { layout:"blog" } </script>
6、
你可以通過編輯 layouts/error.vue 文件來定制化錯誤頁面.
警告: 雖然此文件放在 layouts 文件夾中, 但應該將它看作是一個 頁面(page).
這個布局文件不需要包含 <nuxt/> 標簽。你可以把這個布局文件當成是顯示應用錯誤（404，500等）的組件。
舉一個個性化錯誤頁面的例子 layouts/error.vue:(補充一下，最好不要把它當404頁面使用)
<template> <div> <h1 v-if="error.statusCode === 404">頁面不存在</h1> <h1 v-else>應用發生錯誤異常</h1> <nuxt-link to="/">首 頁</nuxt-link> </div> </template> <script> export default { props: ['error'], layout: 'blog' // 你可以為錯誤頁面指定自定義的布局 } </script>
7、
頁面組件實際上是 Vue 組件，只不過 Nuxt.js 為這些組件添加了一些特殊的配置項（對應 Nuxt.js 提供的功能特性）以便你能快速開發通用應用。
<template>
<h1 class="red">Hello {{ name }}!</h1>
</template>
<script>
export default {
asyncData (context) {
// called every time before loading the component
return { name: 'World' }
},
fetch () {
// The fetch method is used to fill the store before rendering the page
},
head () {
// Set Meta Tags for this Page
},
// and more functionality to discover
...
}
</script>
<style>
.red {
color: red;
}
</style>
8、
如果您的項目中直接使用了node_modules中的axios，
並且使用axios.interceptors添加攔截器對請求或響應數據進行了處理，
確保使用 axios.create創建實例后再使用。否則多次刷新頁面請求服務器，
服務端渲染會重復添加攔截器，導致數據處理錯誤。
import axios from 'axios' const myaxios = axios.create({ // ... }) myaxios.interceptors.response.use(function (response) { return response.data }, function (error) { // ... })
9、上下文對象：
使用 req/res(request/response) 對象
在服務器端調用asyncData時，您可以訪問用戶請求的req和res對象。
export default { async asyncData ({ req, res }) { // 請檢查您是否在服務器端 // 使用 req 和 res if (process.server) { return { host: req.headers.host } } return {} } }
context 變量的可用屬性一覽:
https://www.nuxtjs.cn/api/context
app：vue根實例
process.client：是否是客戶端渲染
process.server：是否是服務端渲染
process.static：是否來自 nuxt generate 靜態化（預渲染）
isDev：是否是開發 dev 模式，在生產環境的數據緩存中用到
isHMR：是否是通過模塊熱替換 webpack hot module replacement (僅在客戶端以 dev 模式)
route：Vue Router 路由實例
store：uex.Store 實例。只有vuex 數據流存在相關配置時可用
env：nuxt.config.js 中配置的環境變量
params：route.params 的別名
query：route.query 的別名
req：Node.js API 的 Request 對象。如果 Nuxt 以中間件形式使用的話，這個對象就根據你所使用的框架而定。nuxt generate 不可用，只有服務端可用
res：Node.js API 的 Response 對象。如果 Nuxt 以中間件形式使用的話，這個對象就根據你所使用的框架而定。nuxt generate 不可用，只有服務端可用
redirect：用這個方法重定向用戶請求到另一個路由。狀態碼在服務端被使用，默認 302
error：用這個方法展示錯誤頁：error(params) 。params 參數應該包含 statusCode 和 message 字段
nuxtState：Nuxt 狀態，在使用 beforeNuxtRender 之前，用於客戶端獲取 Nuxt 狀態，僅在 universal 模式下可用，，只有客戶端可用
beforeNuxtRender(fn)：使用此方法更新 __NUXT__ 在客戶端呈現的變量，fn 調用 (可以是異步) { Components, nuxtState }，只有服務端可用
9、
fetch：與 asyncData 方法類似，用於在渲染頁面之前獲取數據填充應用的狀態樹（store）。不同的是 fetch 方法不會設置組件的數據。
<template>
<h1>Stars: {{ $store.state.stars }}</h1>
</template>
<script>
export default {
fetch ({ store, params }) {
return axios.get('http://my-api/stars')
.then((res) => {
store.commit('setStars', res.data)
})
}
}
</script>
10、
head：配置當前頁面的 Meta 標簽
<template>
<h1>{{ title }}</h1>
</template>
<script>
export default {
data () {
return {
title: 'Hello World!'
}
},
head () {
return {
title: this.title,
meta: [
{ hid: 'description', name: 'description', content: 'My custom description' }
]
}
}
}
</script>
注意：為了避免子組件中的meta標簽不能正確覆蓋父組件中相同的標簽而產生重復的現象，建議利用 hid 鍵為meta標簽配一個唯一的標識編號。
11、
靜態文件目錄 static 用於存放應用的靜態文件，此類文件不會被 Nuxt.js 調用 Webpack 進行構建編譯處理。 服務器啟動的時候，該目錄下的文件會映射至應用的根路徑 / 下。 舉個例子: /static/robots.txt 映射至 /robots.txt 若無額外配置，該目錄不能被重命名。
12、store模塊化
。