目錄結(jié)構(gòu)

資源目錄assets

資源目錄assets用于組織未編譯的靜態(tài)資源如LESS阀溶、SASS或JavaScript。
在編譯vue模版或者css文件時(shí)鸦泳，<img src="">淌哟、background: url(...)、@import均會(huì)被解析成模塊通過require引用辽故。如果我們?cè)赾ss代碼中使用url('_{assets/image.png')，那么編譯后它將被轉(zhuǎn)換成require('}/assets/image.png')腐碱。

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

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

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

js中引入圖片有兩種方式

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

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

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

綜上所述：為了統(tǒng)一寫法方便記憶在vue模版喂走、require有斜杠或相對(duì)路徑，css中沒有斜杠或相對(duì)路徑谋作，引入static中圖片和assets中圖片方式一致芋肠。

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

不建議使用相對(duì)路徑，這樣子就不需要再去查找層級(jí)遵蚜。

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

css在引入scss文件的時(shí)候老是報(bào)錯(cuò)，后來發(fā)現(xiàn)沒有安裝sass插件

組件目錄components

組件目錄components用于組織應(yīng)用的vue.js組件吭净。Nuxt.js不會(huì)擴(kuò)展增強(qiáng)該目錄下vue.js組件睡汹，即這些組件不會(huì)像頁(yè)面組件那樣有asyncData方法的特性。

布局目錄

布局目錄layouts用于組織應(yīng)用的布局組件寂殉。Nuxt.js允許你擴(kuò)展默認(rèn)的布局囚巴，或在layout目錄下創(chuàng)建自定義的布局。

默認(rèn)布局

可通過添加layouts/default.vue文件來擴(kuò)展應(yīng)用的默認(rèn)布局。

提示：別忘了在布局文件中添加<nuxt/>組件用于顯示頁(yè)面的主體內(nèi)容彤叉。

vue-cli中index.html是整個(gè)項(xiàng)目頁(yè)面庶柿，app.vue是vue根組件，其中router-view是匹配最外層的路由秽浇，在nuxt開發(fā)當(dāng)中nuxt.config.js中有head屬性用來控制頁(yè)面頭部相當(dāng)于index.html浮庐，./layout/default.vue用來顯示主體相當(dāng)于app.vue，<nuxt/>相當(dāng)于app.vue中router-view兼呵。

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

錯(cuò)誤頁(yè)面

你可以通過編輯layouts/error.vue文件來定制化錯(cuò)誤頁(yè)面维苔。

警告：雖然此文件放在layouts文件夾中，但應(yīng)該將它看作是一個(gè)頁(yè)面懂昂，相當(dāng)于vue-cli中default文件夾下的組件介时。

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

<template>
  <div class="container">
    <h1 v-if="error.statusCode === 404">頁(yè)面不存在</h1>
    <h1 v-else>應(yīng)用發(fā)生錯(cuò)誤異常</h1>
    <nuxt-link to="/">首 頁(yè)</nuxt-link>
  </div>
</template>

<script>
export default {
  props: ['error'],
  layout: 'blog' // 你可以為錯(cuò)誤頁(yè)面指定自定義的布局
}
</script>

自定義布局

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

<template>
  <div>
    <div>我的博客導(dǎo)航欄在這里</div>
    <nuxt/>
  </div>
</template>

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

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

自定義布局只能用在layouts文件夾下的vue文件铲敛，項(xiàng)目會(huì)默認(rèn)加載layouts/default.vue布局文件褐澎，假如我不想用默認(rèn)布局，想換其他布局那么就可以用layout屬性來切換成其他頁(yè)面布局伐蒋。

中間件目錄

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

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

中間件可以在nuxt.config.js俭正、layouts或者pages中使用，執(zhí)行順序是nuxt.config.js---layouts---pages
中間件執(zhí)行流程順序：
1.nuxt.config.js
2.匹配布局
3.匹配頁(yè)面
中間件可以異步執(zhí)行焙畔，只需要返回一個(gè)Promise或使用第2個(gè)callback作為第一個(gè)參數(shù)：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 中間件將在每個(gè)路由改變時(shí)被調(diào)用。
總結(jié)：可以在middleware文件夾下定義文件宏多，文件名就是中間件名稱儿惫，里面是一個(gè)自定義函數(shù)運(yùn)行在一個(gè)頁(yè)面或一組頁(yè)面渲染之前，中間件可以異步執(zhí)行伸但，只需要返回一個(gè)Promise或使用2個(gè)callback作為第一個(gè)參數(shù)姥闪，然后在你的nuxt.config.js、layouts或者pages中調(diào)用中間件砌烁。

頁(yè)面目錄

頁(yè)面目錄pages用于組織應(yīng)用的路由及視圖筐喳。Nuxt.js框架讀取該目錄下所有的.vue文件并自動(dòng)生成對(duì)應(yīng)的路由配置催式。頁(yè)面組件實(shí)際上是Vue組件，只不過Nuxt.js為這些組件添加了一些特殊的配置項(xiàng)(對(duì)應(yīng)的Nuxt.js提供的功能特性)以便快速開發(fā)通用應(yīng)用避归。
Nuxt.js為頁(yè)面提供的特殊配置項(xiàng)：

asyncData

最重要的一個(gè)鍵荣月，支持異步數(shù)據(jù)處理，另外該方法的第一個(gè)參數(shù)為當(dāng)前頁(yè)面組件的上下文對(duì)象梳毙。
Nuxt.js擴(kuò)展了Vue.js哺窄，增加了一個(gè)叫asyncData的方法，使得我們可以在設(shè)置組件的數(shù)據(jù)之前能異步獲取或處理數(shù)據(jù)账锹。
asyncData方法會(huì)在組件(限于頁(yè)面組件)每次加載之前被調(diào)用萌业。它可以在服務(wù)端或路由更新之前被調(diào)用。在這個(gè)方法被調(diào)用奸柬。這個(gè)方法被調(diào)用的時(shí)候生年，第一個(gè)參數(shù)被設(shè)定為當(dāng)前頁(yè)面的上下文對(duì)象，你可以利用asyncData方法來獲取數(shù)據(jù)廓奕，Nuxt.js會(huì)將asyncData返回的數(shù)據(jù)融合組件data方法返回的數(shù)據(jù)一并返回給當(dāng)前組件抱婉。

注意：由于asyncData方法是在組件初始化前被調(diào)用的，所以在方法內(nèi)是沒有辦法通過this來引用組件的實(shí)例對(duì)象桌粉。
Nuxt.js提供了幾種不同的方法來使用asyncData方法蒸绩，你可以選擇自己熟悉的一種來用：
1.返回一個(gè)Promise
2.使用async和await

asyncData方法的第一個(gè)參數(shù)context是上下文對(duì)象，它是各種屬性和方法的集合铃肯，利用context可以去獲取各種數(shù)據(jù)和調(diào)用各種方法患亿。

fetch

與asyncData方法類似，用于在渲染頁(yè)面之前獲取數(shù)據(jù)填充應(yīng)用的狀態(tài)樹(store)押逼。不同的是fetch方法不會(huì)設(shè)置組件的數(shù)據(jù)步藕。
如果頁(yè)面組件設(shè)置了fetch方法，它會(huì)在組件每次加載前被調(diào)用(在服務(wù)端或切換至目標(biāo)路由之前)宴胧。

head

配置當(dāng)前頁(yè)面的Meta標(biāo)簽。
Nuxt.js使用了vue-meta更新應(yīng)用的頭部標(biāo)簽?zāi)?Head)和html屬性表锻。
使用head方法設(shè)置當(dāng)前頁(yè)面的頭部標(biāo)簽恕齐。
在head方法里可通過this關(guān)鍵字來獲取組件的數(shù)據(jù)，你可以利用頁(yè)面組件的數(shù)據(jù)來設(shè)置個(gè)性化的meta標(biāo)簽瞬逊。
為了避免子組件中的meta標(biāo)簽不能正確覆蓋父組件中相同的標(biāo)簽而產(chǎn)生重復(fù)的現(xiàn)象显歧，建議利用hid鍵為meta標(biāo)簽配一個(gè)唯一的標(biāo)識(shí)編號(hào)。當(dāng)父子組件設(shè)定了相同的標(biāo)識(shí)值确镊，子組件就會(huì)覆蓋父組件的配置士骤。

layout屬性

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

loading

有三種情況：一種是去掉加載條拷肌，一種是個(gè)性加載進(jìn)度條到旦，還有一種是自定義加載組件。
去掉加載條：在nuxt.config.js中設(shè)置loading: false巨缘。
個(gè)性加載進(jìn)度條：在nuxt.config.js中設(shè)置loading: {}添忘，里面有很多特性，詳情看文檔若锁。
自定義加載組件：我們需要在components目錄下創(chuàng)建自定義的加載組件搁骑，如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文件中設(shè)置loading:'~/components/loading.vue'。
這里一定要加斜杠仰冠，不然會(huì)報(bào)錯(cuò)This dependency was not found乏冀，不知道官網(wǎng)為什么不加也沒報(bào)錯(cuò)，我犯的錯(cuò)最多的就是路徑問題和寫錯(cuò)了沪停。

以上步驟做完之后需要最后需要在頁(yè)面組件中調(diào)用this.loading.start()啟動(dòng)加載條煤辨，使用this.loading.finish()來使加載條結(jié)束。如果在mounted中需要調(diào)用this.$nextTick()：

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

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

transition

Nuxt.js使用Vue.js的<transition>組件來實(shí)現(xiàn)路由切換時(shí)的過渡動(dòng)效木张。如果想給某個(gè)頁(yè)面自定義過渡特效的話众辨，只要在該頁(yè)面組件中配置transition字段即可：

export default {
   // 可以是字符
   transition: ''
   // 或?qū)ο?   transition: {}
   // 或函數(shù)
   transition (to, from) {}
}

字符

如果transition屬性的值類型是字符類型，相當(dāng)于設(shè)置了動(dòng)效配置對(duì)象的name屬性值：transition.name舷礼。

export default {
  transition: 'test'
}

Nuxt.js 將使用上面的配置來設(shè)置 Vue.js自帶的transition 組件鹃彻，如下：

<transition name="test">

transition組件是Vue.js自帶的，并且暴露到全局環(huán)境妻献，所以設(shè)置的transition都會(huì)到添加到組件上蛛株。

對(duì)象

如果transition屬性的值類型是對(duì)象類型

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

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

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

函數(shù)

如果transition屬性的值類型為函數(shù)：

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

scrollToTop

布爾值育拨，默認(rèn)：false谨履。用于判定渲染頁(yè)面前是否需要將當(dāng)前頁(yè)面滾動(dòng)至頂部。這個(gè)配置用于嵌套路由的應(yīng)用場(chǎng)景熬丧。

validate

檢驗(yàn)方法用于檢驗(yàn)動(dòng)態(tài)路由的參數(shù)笋粟。