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)。按照惯例,新增的属性或方法名使用$
作为前缀