視圖的整體布局圖如下所示：
備注：此圖來源
（1）模板
在項目根目錄下創建一個app.html文件，可以定制化默認的html模板。
- 在app.html文件中內容如下：
<!-- 這是我簡單修改的 --> <!DOCTYPE html> <html {{ HTML_ATTRS }}> <head {{ HEAD_ATTRS }}> 頭部 </head> <body {{ BODY_ATTRS }}> 主體 </body> </html> <!-- 這是默認的模板 --> <!DOCTYPE html> <html {{ HTML_ATTRS }}> <head {{ HEAD_ATTRS }}> {{ HEAD }} </head> <body {{ BODY_ATTRS }}> {{ APP }} </body> </html>
- 定制化效果如下：
（2）布局
- 默認布局
在layouts/default.vue文件中可以擴展應用的默認布局。注意了，在布局文件中添加 <nuxt/> 組件用於顯示頁面的主體內容。
例如，我在default.vue文件中新增這樣一條語句：<h2>Hello World</h2>
<template> <div> <h2>Hello World</h2> <nuxt /> </div> </template>
效果如下：
- 自定義布局
layouts 目錄中的每個文件 (頂級) 都將創建一個可通過頁面組件中的 layout 屬性訪問的自定義布局。
例如在layouts目錄下新增一個mytest.vue文件，內容如下：
<template> <div> <div>這是我的測試</div> <nuxt /> </div> </template>
然后在pages/index.vue文件中添加layout屬性，修改如下：
export default { components: { Logo }, layout: 'mytest' }
最終的效果如下：
由上圖可知，mytest.vue的布局已經覆蓋了默認的布局。
- 錯誤頁面
我們可以通過編輯 layouts/error.vue 文件來定制化錯誤頁面。說明：雖然此文件放在 layouts 文件夾中， 但應該將它看作是一個 頁面(page)，並且這個布局文件不需要包含 <nuxt/> 標簽。
（3）頁面
頁面組件實際上是 Vue 組件，只不過 Nuxt.js 為這些組件添加了一些特殊的配置項（對應 Nuxt.js 提供的功能特性）以便你能快速開發通用應用。Nuxt.js提供的特殊配置項如下表所示：
| 屬性名 | 描述 |
| asyncData | 最重要的一個鍵, 支持 異步數據處理，另外該方法的第一個參數為當前頁面組件的 上下文對象。 |
| fetch | 與asyncData方法類似，用於在渲染頁面之前獲取數據填充應用的狀態樹（store）。不同的是 fetch 方法不會設置組件的數據。 |
| head | 配置當前頁面的 Meta 標簽。 |
| layout | 指定當前頁面使用的布局（layouts 根目錄下的布局文件） |
| loading | 如果設置為false，則阻止頁面自動調用this.$nuxt.$loading.finish()和this.$nuxt.$loading.start()，可以手動控制它，僅適用於在nuxt.config.js中設置loading的情況下。 |
| transition | 指定頁面切換的過渡動效。 |
| scrollToTop | 布爾值，默認: false。 用於判定渲染頁面前是否需要將當前頁面滾動至頂部。這個配置用於 嵌套路由的應用場景。 |
| validate | 校驗方法用於校驗 動態路由的參數。 |
| middleware | 指定頁面的中間件，中間件會在頁面渲染之前被調用。 |
（4）HTML頭部
Nuxt.js 使用了 vue-meta 更新應用的 頭部標簽(Head) 和 html屬性。在 nuxt.config.js 里定義應用所需的所有默認 meta 標簽，在 head 字段里配置就可以了。說明： Nuxt.js 使用 hid 而不是默認值 vmid 識別元素key。為了避免子組件中的meta標簽不能正確覆蓋父組件中相同的標簽而產生重復的現象，建議利用 hid 鍵為meta標簽配一個唯一的標識編號。