Nuxt.js 允许我们在Vue.js应用程序之前执行js插件。我们使用第三方插件和自己的库的时候会很方便。

Vue.js的生命周期当中,只有beforeCreate 和 created 两个方法会站在 客户端和服务端被调用 , 其他的生命周期都是只能在客户端调用

使用第三方模块 #

比如我们要是用Axios 做http请求

首先要安装npm包 , 然后在页面调用的时候

<template>
	<div>{{ title }}</div>
</template>

<script>
import axios from 'axios'

export default{
    async asyncData {{ params }} {
		let { data } = await axios.get()  
    }
}
</script>

使用Vue 插件 #

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

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

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

Vue.use(VueNotifications)

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

module.exports = {
  plugins: ['~/plugins/vue-notifications']
}

ES6 插件 #

如果插件位于node_modules并导出模块，需要将其添加到transpile构建选项：

module.exports = {
  build: {
    transpile: ['vue-notifications']
  }
}

注入$root 或者 context #

有时您希望在整个应用程序中使用某个函数或属性值，此时，你需要将它们注入到Vue实例（客户端），context（服务器端）甚至 store(Vuex)。按照惯例，新增的属性或方法名使用$作为前缀

注入Vue 实例 #