【9】Nuxt.js 资源文件

插件

Nuxt.js允许您在运行Vue.js应用程序之前执行js插件。这在您需要使用自己的库或第三方模块时特别有用。

需要注意的是，在任何 Vue 组件的生命周期内， 只有 beforeCreate 和 created 这两个方法会在 客户端和服务端被调用。其他生命周期函数仅在客户端被调用。

使用第三方模块

我们可以在应用中使用第三方模块，一个典型的例子是在客户端和服务端使用 axios 做 HTTP 请求。

首先我们需要安装 npm 包：

npm install --save axios

然后，在页面内这样使用：

<template>
  <h1>{
  { title }}</h1>
</template>

<script>
import axios from 'axios'

export default {
  async asyncData ({ params }) {
    let { data } = await axios.get(`https://my-api/posts/${params.id}`)
    return { title: data.title }
  }
}
</script>

使用 Vue 插件

假如我们想使用 vue-notifications 显示应用的通知信息，我们需要在程序运行前配置好这个插件。

首先增加文件 plugins/vue-notifications.js：

import Vue from 'vue'
import VueNotifications from 'vue-notifications'

Vue.use(VueNotifications)

然后, 在 nuxt.config.js 内配置 plugins 如下：