Nuxt.js 插件
Nuxt.js允许您在运行Vue.js应用程序之前执行js。这在您需要使用自己的库或第三方模块时特别有用。
需要注意的是,在任何 Vue 组件的内, 只有 beforeCreate 和 created 这两个会在 客户端和服务端被。其他生命周期仅在客户端被。
我们可以在应用中使用第三方模块,典型的例子是在客户端和服务端使用 做 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>
假如我们想使用 应用的信息,我们需要在程序运行前配置好这个。
首先 plugins/vue-notifications.js:
import Vue from 'vue' import VueNotifications from 'vue-notifications' Vue.use(VueNotifications)
然后, 在 nuxt.con.js 内配置 plugins 如下:
module.exports = { plugins: ['~/plugins/vue-notifications'] }
想了解更多关于 plugins 的配置,请参考 API 文档。
如果位于node_modules并导出模块,需要将其到transpile构建选项:
module.exports = { build: { transpile: ['vue-notifications'] } }
您可以参考构建配置文档来更多构建选项。
有时您希望在整个应用程序中使用某个或值,此时,你需要将它们注入到Vue实例(客户端),context(服务器端)甚至 store(Vuex)。按照惯例,新增的或名使用$作为前缀。
将注入Vue实例,避免重复引入,在Vue原型上挂载注入,所有组件内都可以访问(不包含服务器端)。
plugins/vue-inject.js:
import Vue from 'vue' Vue.prototype.$myInjectedFunction = string => console.log('This is an example', string)
nuxt.con.js:
export default { plugins: ['~/plugins/vue-inject.js'] }
这样,您就可以在所有Vue组件中使用该。
example-component.vue:
export default { mounted () { this.$myInjectedFunction('test') } }
context注入方式和在其它vue应用程序中注入类似。
plugins/ctx-inject.js:
export default ({ app }, inject) => { // Set the function directly on the context.app object app.myInjectedFunction = string => console.log('Okay, another function', string) }
nuxt.con.js:
export default { plugins: ['~/plugins/ctx-inject.js'] }
现在,只要您获得context,你就可以使用该(例如在asyncData和fetch中)。 ctx-example-component.vue:
export default { asyncData (context) { context.app.myInjectedFunction('ctx!') } }
如果您需要同时在context,Vue实例,甚至Vuex中同时注入,您可以使用inject,它是plugin导出的第二个参数。 将注入Vue实例的方式与在Vue应用程序中进行注入类似。系统会将$到名的前面。
plugins/combined-inject.js:
export default ({ app }, inject) => { inject('myInjectedFunction', string => console.log('That was easy!', string)) }
nuxt.con.js:
export default { plugins: ['~/plugins/combined-inject.js'] }
现在您就可以在context,或者Vue实例中的this,或者Vuex的actions/mutations中的this来myInjectedFunction。 ctx-example-component.vue:
export default { mounted () { this.$myInjectedFunction('works in mounted') }, asyncData (context) { context.app.$myInjectedFunction('works with context') } }
store/index.js:
export const state = () => ({ someValue: '' }) export const mutations = { changeSomeValue (state, newValue) { this.$myInjectedFunction('accessible in mutations') statemeValue = newValue } } export const actions = { setSomeValueToWhatever ({ commit }) { this.$myInjectedFunction('accessible in actions') const newValue = 'whatever' commit('changeSomeValue', newValue) } }
ssr的系统,只在浏览器里使用,这种情况下下,你可以用 ssr: false ,使得只会在客户端运行。
举个例子:
nuxt.con.js:
module.exports = { plugins: [ { src: '~/plugins/vue-notifications', ssr: false } ] }
plugins/vue-notifications.js:
import Vue from 'vue' import VueNotifications from 'vue-notifications' Vue.use(VueNotifications)
您可以通过检测process.server这个变量来控制中的某些脚本库只在服务端使用。当值为 true 表示是当前执行环境为服务器中。 此外,可以通过检查process.static是否为true来判断应用是否通过nuxt generator。您也可以组合process.server和process.static这两个选项,确定当前状态为服务器端渲染且使用nuxt generate命令运行。
注意:由于Nuxt.js 2.4,模式已被引入作为的选项来指定类型,可能的值是:client 或 server, ssr:false 在下主要版本中弃用,将过渡为 mode: 'client'。
例子:
nuxt.con.js:
export default { plugins: [ { src: '~/plugins/both-sides.js' }, { src: '~/plugins/client-only.js', mode: 'client' }, { src: '~/plugins/server-only.js', mode: 'server' } ] }
如果假设仅在 客户端 或 服务器端 运行,则 .client.js 或 .server.js可以作为的扩展名应用,该将包含在相应客户端或者服务端上。
例子:
nuxt.con.js:
export default { plugins: [ '~/plugins/foo.client.js', // only in client side '~/plugins/bar.server.js', // only in server side '~/plugins/baz.js' // both client & server ] }