目錄結構

資源目錄assets

資源目錄assets用于組織未編譯的靜態資源如LESS、SASS或JavaScript。
在編譯vue模版或者css文件時，<img src="">、background: url(...)、@import均會被解析成模塊通過require引用。如果我們在css代碼中使用url('_{assets/image.png')，那么編譯后它將被轉換成require('}/assets/image.png')。

vue模版、js、css中分別引入圖片

vue模版中引入圖片有三種方式

// 相對路徑
<img src="../assets/images/write.svg">
// 有斜杠
<img src="~/assets/images/write.svg">
// 沒有斜杠
<img src="~assets/images/write.svg">

js中引入圖片有兩種方式

// 相對路徑
this.img = require('../static/images/share.svg')
// 有斜杠
this.img = require('~/static/images/share.svg')

注意：必須要有require并且有斜杠。
css中引入圖片有兩種方式

// 相對路徑
background: url('../assets/images/juejin.svg')
// 沒有斜杠 
background: url('～assets/images/juejin.svg')

綜上所述：為了統一寫法方便記憶在vue模版、require有斜杠或相對路徑，css中沒有斜杠或相對路徑，引入static中圖片和assets中圖片方式一致。

// vue模版
<img src="~/assets/images/write.svg">
// js
this.img = require('~/static/images/share.svg')
// css
background: url('～assets/images/juejin.svg')

不建議使用相對路徑，這樣子就不需要再去查找層級。

js中引入組件，css中引入樣式

css在引入scss文件的時候老是報錯，后來發現沒有安裝sass插件

組件目錄components

組件目錄components用于組織應用的vue.js組件。Nuxt.js不會擴展增強該目錄下vue.js組件，即這些組件不會像頁面組件那樣有asyncData方法的特性。

布局目錄

布局目錄layouts用于組織應用的布局組件。Nuxt.js允許你擴展默認的布局，或在layout目錄下創建自定義的布局。

默認布局

可通過添加layouts/default.vue文件來擴展應用的默認布局。

提示：別忘了在布局文件中添加<nuxt/>組件用于顯示頁面的主體內容。

vue-cli中index.html是整個項目頁面，app.vue是vue根組件，其中router-view是匹配最外層的路由，在nuxt開發當中nuxt.config.js中有head屬性用來控制頁面頭部相當于index.html，./layout/default.vue用來顯示主體相當于app.vue，<nuxt/>相當于app.vue中router-view。

注意：沒有keep-alive
由于是服務端渲染，所以不支持組件的keep-alive，那自然activaed、deactivated這兩個生命周期也沒了

錯誤頁面

你可以通過編輯layouts/error.vue文件來定制化錯誤頁面。

警告：雖然此文件放在layouts文件夾中，但應該將它看作是一個頁面，相當于vue-cli中default文件夾下的組件。

這個布局文件不需要包含<nuxt/>標簽。你可以把這個布局文件當成是顯示應用錯誤(400, 500等)的組件。舉一個個性化錯誤頁面的例子layouts/error.vue:

<template>
  <div class="container">
    <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>

自定義布局

layouts目錄中的每個文件(頂級)都將創建一個可通過頁面組件中的layout屬性訪問的自定義布局，例如上面的error.vue中的layout。假設我們要創建一個博客布局并將其保存到layouts/blog.vue：

<template>
  <div>
    <div>我的博客導航欄在這里</div>
    <nuxt/>
  </div>
</template>

然后我們必須告訴頁面 (即pages/posts.vue) 使用您的自定義布局：

<template>
<!-- Your template -->
</template>
<script>
export default {
  layout: 'blog'
  // page component definitions
}
</script>

自定義布局只能用在layouts文件夾下的vue文件，項目會默認加載layouts/default.vue布局文件，假如我不想用默認布局，想換其他布局那么就可以用layout屬性來切換成其他頁面布局。

中間件目錄

中間件允許您定義一個自定義函數運行在一個頁面或一組頁面渲染之前。每一個中間件應放置在middleware/目錄。文件名的名稱將成為中間件名稱(middleware/auth.js將成為auth中間件)。一個中間件接收context作為第一個參數：

export default function (context) {
   context.userAgent = process.server ? context.req.headers['user-agent'] : navigator.userAgent
}

中間件可以在nuxt.config.js、layouts或者pages中使用，執行順序是nuxt.config.js---layouts---pages
中間件執行流程順序：
1.nuxt.config.js
2.匹配布局
3.匹配頁面
中間件可以異步執行，只需要返回一個Promise或使用第2個callback作為第一個參數：middleware/stats.js

import axios from 'axios'
export default function ({ route }) {
  return axios.post('http://my-stats-api.com', {
    url: route.fullPath
  })
}

然后在你的 nuxt.config.js 、 layouts 或者 pages 中使用中間件:
nuxt.config.js

module.exports = {
  router: {
    middleware: 'stats'
  }
}

stats 中間件將在每個路由改變時被調用。
總結：可以在middleware文件夾下定義文件，文件名就是中間件名稱，里面是一個自定義函數運行在一個頁面或一組頁面渲染之前，中間件可以異步執行，只需要返回一個Promise或使用2個callback作為第一個參數，然后在你的nuxt.config.js、layouts或者pages中調用中間件。

頁面目錄

頁面目錄pages用于組織應用的路由及視圖。Nuxt.js框架讀取該目錄下所有的.vue文件并自動生成對應的路由配置。頁面組件實際上是Vue組件，只不過Nuxt.js為這些組件添加了一些特殊的配置項(對應的Nuxt.js提供的功能特性)以便快速開發通用應用。
Nuxt.js為頁面提供的特殊配置項：

asyncData

最重要的一個鍵，支持異步數據處理，另外該方法的第一個參數為當前頁面組件的上下文對象。
Nuxt.js擴展了Vue.js，增加了一個叫asyncData的方法，使得我們可以在設置組件的數據之前能異步獲取或處理數據。
asyncData方法會在組件(限于頁面組件)每次加載之前被調用。它可以在服務端或路由更新之前被調用。在這個方法被調用。這個方法被調用的時候，第一個參數被設定為當前頁面的上下文對象，你可以利用asyncData方法來獲取數據，Nuxt.js會將asyncData返回的數據融合組件data方法返回的數據一并返回給當前組件。

注意：由于asyncData方法是在組件初始化前被調用的，所以在方法內是沒有辦法通過this來引用組件的實例對象。
Nuxt.js提供了幾種不同的方法來使用asyncData方法，你可以選擇自己熟悉的一種來用：
1.返回一個Promise
2.使用async和await

asyncData方法的第一個參數context是上下文對象，它是各種屬性和方法的集合，利用context可以去獲取各種數據和調用各種方法。

fetch

與asyncData方法類似，用于在渲染頁面之前獲取數據填充應用的狀態樹(store)。不同的是fetch方法不會設置組件的數據。
如果頁面組件設置了fetch方法，它會在組件每次加載前被調用(在服務端或切換至目標路由之前)。

head

配置當前頁面的Meta標簽。
Nuxt.js使用了vue-meta更新應用的頭部標簽呢(Head)和html屬性。
使用head方法設置當前頁面的頭部標簽。
在head方法里可通過this關鍵字來獲取組件的數據，你可以利用頁面組件的數據來設置個性化的meta標簽。
為了避免子組件中的meta標簽不能正確覆蓋父組件中相同的標簽而產生重復的現象，建議利用hid鍵為meta標簽配一個唯一的標識編號。當父子組件設定了相同的標識值，子組件就會覆蓋父組件的配置。

layout屬性

layouts根目錄下的所有文件都屬于個性化布局文件，可以在頁面組件中利用layout屬性引用。

loading

有三種情況：一種是去掉加載條，一種是個性加載進度條，還有一種是自定義加載組件。
去掉加載條：在nuxt.config.js中設置loading: false。
個性加載進度條：在nuxt.config.js中設置loading: {}，里面有很多特性，詳情看文檔。
自定義加載組件：我們需要在components目錄下創建自定義的加載組件，如components/loading.vue：

<template lang="html">
  <div class="loading-page" v-if="loading">
    <p>Loading...</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    loading: false
  }),
  methods: {
    start () {
      this.loading = true
    },
    finish () {
      this.loading = false
    }
  }
}
</script>

<style scoped>
.loading-page {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding-top: 200px;
  font-size: 30px;
  font-family: sans-serif;
}
</style>

定義的start()方法和finish()方法是必須的，fail()、increase(num)是非必須的。
然后在nuxt.config.js文件中設置loading:'~/components/loading.vue'。
這里一定要加斜杠，不然會報錯This dependency was not found，不知道官網為什么不加也沒報錯，我犯的錯最多的就是路徑問題和寫錯了。

以上步驟做完之后需要最后需要在頁面組件中調用this.loading.start()啟動加載條，使用this.loading.finish()來使加載條結束。如果在mounted中需要調用this.$nextTick()：

export default {
  mounted () {
    this.$nextTick(() => {
      this.$nuxt.$loading.start()

      setTimeout(() => this.$nuxt.$loading.finish(), 500)
    })
  }
 }

transition

Nuxt.js使用Vue.js的<transition>組件來實現路由切換時的過渡動效。如果想給某個頁面自定義過渡特效的話，只要在該頁面組件中配置transition字段即可：

export default {
   // 可以是字符
   transition: ''
   // 或對象
   transition: {}
   // 或函數
   transition (to, from) {}
}

字符

如果transition屬性的值類型是字符類型，相當于設置了動效配置對象的name屬性值：transition.name。

export default {
  transition: 'test'
}

Nuxt.js 將使用上面的配置來設置 Vue.js自帶的transition 組件，如下：

<transition name="test">

transition組件是Vue.js自帶的，并且暴露到全局環境，所以設置的transition都會到添加到組件上。

對象

如果transition屬性的值類型是對象類型

export default {
  transition: {
    name: 'test',
    mode: 'out-in'
  }
}

Nuxt.js 將使用上面的配置來設置 Vue.js transition 組件，如下：

<transition name="test" mode="out-in">

函數

如果transition屬性的值類型為函數：

export default {
  transition (to, from) {
    if (!from) return 'slide-left'
    return +to.query.page < +from.query.page ? 'slide-right' : 'slide-left'
  }
}

scrollToTop

布爾值，默認：false。用于判定渲染頁面前是否需要將當前頁面滾動至頂部。這個配置用于嵌套路由的應用場景。

validate

檢驗方法用于檢驗動態路由的參數。