Nuxt.js的API学习

目录结构

资源目录assets

资源目录assets用于组织未编译的静态资源如LESS、SASS或JavaScript。
在编译vue模版或者css文件时，、background: url(...)、@import均会被解析成模块通过require引用。如果我们在css代码中使用url('_{assets/image.png')，那么编译后它将被转换成require('}/assets/image.png')。

vue模版、js、css中分别引入图片

vue模版中引入图片有三种方式

// 相对路径

// 有斜杠

// 没有斜杠

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模版

// 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文件来扩展应用的默认布局。

提示：别忘了在布局文件中添加组件用于显示页面的主体内容。

vue-cli中index.html是整个项目页面，app.vue是vue根组件，其中router-view是匹配最外层的路由，在nuxt开发当中nuxt.config.js中有head属性用来控制页面头部相当于index.html，./layout/default.vue用来显示主体相当于app.vue，相当于app.vue中router-view。

注意：没有keep-alive
由于是服务端渲染，所以不支持组件的keep-alive，那自然activaed、deactivated这两个生命周期也没了

错误页面

你可以通过编辑layouts/error.vue文件来定制化错误页面。

警告：虽然此文件放在layouts文件夹中，但应该将它看作是一个页面，相当于vue-cli中default文件夹下的组件。

这个布局文件不需要包含标签。你可以把这个布局文件当成是显示应用错误(400, 500等)的组件。举一个个性化错误页面的例子layouts/error.vue:

自定义布局

layouts目录中的每个文件(顶级)都将创建一个可通过页面组件中的layout属性访问的自定义布局，例如上面的error.vue中的layout。假设我们要创建一个博客布局并将其保存到layouts/blog.vue：

然后我们必须告诉页面 (即pages/posts.vue) 使用您的自定义布局：

自定义布局只能用在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：

定义的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字段即可：

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

字符

如果transition属性的值类型是字符类型，相当于设置了动效配置对象的name属性值：transition.name。

export default {
  transition: 'test'
}

Nuxt.js 将使用上面的配置来设置 Vue.js自带的transition 组件，如下：

transition组件是Vue.js自带的，并且暴露到全局环境，所以设置的transition都会到添加到组件上。

对象

如果transition属性的值类型是对象类型

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

Nuxt.js 将使用上面的配置来设置 Vue.js transition 组件，如下：

函数

如果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

检验方法用于检验动态路由的参数。