幹了幾個月的nuxt項目，差點沒把本身給幹翻。在公司沒開幹nuxt項目以前，我也沒接觸過nuxt,潦潦草草看了幾眼官網就開幹了，在這過程當中也踩了很多坑，也寫了很多無謂的代碼，因此藉助此次摸🐟 的時間總結了一些實戰用到的知識點，但願能幫到你，能讓你少踩點坑，文采很差，湊合着看。javascript

middleware定義（nuxt.config, layout, pages）

middleware顧名思義就是中間件的意思，在中間價能夠作路由攔截，參數過濾等等...middleware有如下三種定義方式。css

nuxt.config 配置文件定義

export default{
 router:{
     middleware: ['xxxx'] //直接寫中間件文件名，好比middleware/auth.js，直接寫auth就ojbk
  }
}
複製代碼

特別提醒⏰ ：定義在nuxt.config中的中間件要在根目錄的middleware文件下，定義對應的js文件，導出一個函數。
複製代碼

layout頁面定義

export default {
  middleware:({route,params,query})=>{
    console.log(route,params,query, 'layout')
  }
}
複製代碼

pages頁面定義

export default {
  middleware:({route,params,query})=>{
    console.log(route,params,query, 'page')
  }
}
複製代碼

middleware的第一參數是一個上下文參數，可以解構出route,params,query等等...參數，足夠咱們作各類騷操做。既然它們可以定義在不一樣位置，那麼它們的執行順序就有前有後👇。html

執行順序：nuxt.config => layout => pagevue

validate 參數驗證 (pages)

validate鉤子主要是作頁面級別（pages）的參數驗證操做,在它的上下文可以解構出params,query...參數，最後return true表明驗證經過，return false表示驗證失敗。java

export default {
  validate({params,query}){
    console.log(params,query,'validate')
    return true
  }
}
複製代碼

asyncData 服務端請求異步數據 (pages)

asyncData 主要作服務端數據請求渲染,在它上下文可以解構出 $axios,route,params...參數，要解構出$ axios，還須要作一些額外配置，往下拉有講到。解構出$axios，就能夠作ajax請求，最後把要渲染的數據return出去就行。ios

export default {
  async asyncData({$axios,route}){
    let data = await $axios('xxx/xxx/xx')
    return {
    	data
    }
  }
}
複製代碼

擴展路由（nuxt.config）

在nuxt默認爲約定是路由，就是在pages在建立一個文件，或者一個文件夾就會自動建立對應的路由，無需手動配置什麼，方便極了，這裏就很少說，這裏只要說一下，當咱們要對某個地址作一個特殊操做的時候，或者全面接管約定式路由的時候，就須要用擴展路由了。ajax

假如想讓一個叫/hahaha/:id的路由也跳到詳情，也這樣作👇vuex

export default {
  router:{
    extendRoutes:(routes,resolve)=>{
      routes.push({
        name:"hahaha",
        path:'/hahaha/:id',
        component:resolve(__dirname,'pages/detail/_id.vue')
      })
    }
  }
}
複製代碼

假如要全面接管約定式路由，能夠這樣作👇npm

export default {
  router:{
    extendRoutes(routes, resolve){
     return [
       {
         name:"home",
         path:"/",
         component:resolve(__dirname,'pages/index'),
         meta:{
           title:"home"
         }
       }
       ...這裏還能夠繼續寫，通常若是要接管約定式路由的話，都會把它放到一個文件再引入
     ]
    }
  }
}
複製代碼

定製錯誤頁面（layout）

處理錯誤頁面，默認狀況下，nuxt提供了一個默認的錯誤頁面，若是你嫌它錯的哇，也能夠本身定製一個風騷的錯誤頁面，直接下layout目錄下定義一個error.vue文件就能夠定製本身喜歡的錯誤頁面了，它會代替默認的錯誤頁面，在error.vue的prop有個error屬因而包含錯誤信息的element-ui

<template>
  <div>
      錯誤頁面{{ error }}
  </div>
</template>
<script>
export default {
   props:['error']
}
</script>
複製代碼

動畫定製（css,pages, nuxt.config）

全局

假如想要全局實現一個路由切換動畫，那麼能夠在根目錄的assets/css目錄(全局css樣式能夠隨便你放，通常都會放在assets下,你也能夠放在某個角落)定義一個全局文件，實現一下如下幾個類👇

page-enter-active
page-leave-active
page-enter
page-leave

🌰

.page-enter-active, .page-leave-active{
    transition: opacity 1.5s;
}
.page-enter, .page-leave-active{
    opacity: 0;
}
複製代碼

最後在nuxt.config引用這個文件就能夠實現一個路由切換的淡入淡出效果。

export default {
  css: [
    "assets/css/xxx.css"
  ],
}
複製代碼

局部

假如想在某個路由頁面有個一種獨一無二的入場出場方式的話，也能夠爲它單獨實現獨有的效果，只須要給個transition:'xxxx'(xxx是本身起的名字，隨便你起),而後實現對應的類就能夠實現該有的動畫。

xxx-enter-active
xxx-leave-active
xxx-enter
xxx-leave

路由守衛

全局守衛

定義的在nuxt.config的middleware
定義在layout的middleware
定義在plugins

組件局部守衛

定義在組件的middleware

局部後置守衛

組件beforeRouteLeave鉤子

數據請求 (nuxt.config)

要作數據請求，就要用到axios了，nuxt有爲咱們集成，只須要安裝，引用就能夠。

第一步 npm i -D @nuxtjs/axois
第二步在nuxt.config引入就能夠

export default{
 modules: [
  '@nuxtjs/axios'
 ]
}
複製代碼

而後重啓，就能夠在plugin,aysncData...的上下文解構到$axios參數

重要提醒⏰ ： nuxt集成的庫大多數都要在modules中引入。
複製代碼

開啓代理

有時候咱們的接口出現了跨域，那麼咱們就要代理了。

第一步 npm i -D @nuxtjs/proxy
第二步 nuxt.config 下配置
@nuxtjs/proxy
nuxt.config 下配置 axios和proxy

export default {
  axios:{
     proxy:true
   }，
   proxy:{
     'api/':{
       target:'http://localhost:3000'
     }
   }
}
複製代碼

axios攔截

在平時開發中請求異步數據，少不了請求前，請求後作一些攔截，在nuxt中也很容易實現，只需定義一個axios攔截plugin。

第一步在plugins目錄，起一個性感的插件名，好比叫axios.js

export default({$axios})=>{
  // 請求攔截
  $axios.onRequest(req=>{
    // doing something...
  })
  // 響應攔截
  $axios.onResponse(res=>{
    // doing something...
  })
  // 錯誤攔截
  $axios.onError(err=>{
  // doing something...
  })
}
複製代碼

第二步在nuxt.config中引入插件

export default {
plugins: [
    {
      src:'~/plugins/axios',
      ssr:true // 默認爲true，會同時在服務端（asyncData（{$axios}））和客戶端（this.$axios）同時攔截axios請求，設爲false就只會攔截客戶端
    }
  ]
}
複製代碼

配置loading （nuxt.config）

配置loading有兩種方式。一種在，

直接在默認的loading上調樣式

export default {
  loading: {
    color: 'blue',
    height: '5px'
  }
}
複製代碼

它還有這樣屬性能夠調

定製loading

export default {
  loading: '指向一個組件的路徑'
}
複製代碼

這個被指向的組件會有兩個特殊鉤子start, finish鉤子，表明開始加載的時候，和加載結束的時候作些什麼

vuex

配置vuex直接下根目錄下的store目錄下定義就能夠了，注意的是，除了index文件不是具名文件，其餘的文件都是具名的,具名的在調用使須要加上這個名字，好比（this.$store.commit('xxx/handle')）。

vuex的文件寫法格式以下👇

export const state => （{}）

export const getters = {}

export const actions = {}

export const mutations = {}
複製代碼

配置UI庫

第三方UI庫配置，這裏以element-ui爲例。

第一步 npm i -D element-ui
第二步在plugins目錄建議xxx.js而後引入element-ui註冊

import Vue from 'vue'

import ElementUi from 'element-ui'

Vue.use(ElementUi)
複製代碼

第三步在nuxt.config 配置

export default {
  css: [
    "element-ui/lib/theme.chalk/index.css" //引入element-ui的樣式
  ],
  plugins: [
    '~/plugins/xxx' // 引入剛剛定義的plugin
  ]
}
 
複製代碼

定製meta（nuxt.config,pages）

定製能夠在nuxt.config中定義全局，也能夠在pages下定製單獨的。

nuxt

export default {
  head: {
    title: 'test',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  }
}
複製代碼

pages

export default {
  head:()=>({
    title: 'test',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  })
}
複製代碼

其餘

路徑別名:~ 或 @ srcDir , ~~ 或 @@ rootDir (默認狀況下，srcDir 和 rootDir 相同)
nuxt-link 選中樣式修改 active-class='xxx'
@nuxtjs/style-resources 配置less,scss全局變量
更多特性,本身看官網

肝了幾個月nuxt項目，想把這些實用知識點分享給你（乾貨）