NuxtJS项目——插件

  Nuxt.js允许在运行Vue.js应用程序之前执行js插件,而nuxt.config.js文件中可以通过plugins属性来配置插件,并且将需要的插件可以放置在plugins目录下。

  (1)客户端使用的插件

  如果只想要插件在客户端使用的话,那么通过可通过nuxt.config.js文件的plugins属性的ssr选项来控制,即ssr:false,就表示插件只会在客户端使用,例如:

module.exports = {
  plugins: [
    { src: '~/plugins/vue-test', ssr: false }
  ]
}

  由于Nuxt.js 2.4版本,模式已被引入作为插件的选项来指定插件类型,可能的值是:client 或 server,而ssr:false 在下一个主要版本中弃用,将过渡为 mode: 'client',也就是说ssr:false将会被mode:'client'所取代。

  (2)服务端使用的插件

  可以通过检测process.server这个变量来控制插件中的某些脚本库只在服务端使用。当值为 true 表示是当前执行环境为服务器中。 此外,可以通过检查process.static是否为true来判断应用是否通过nuxt generator生成。您也可以组合process.serverprocess.static这两个选项,确定当前状态为服务器端渲染且使用nuxt generate命令运行。

  (3)插件的命名

  如果假设插件仅在 客户端 或 服务器端 运行,则 .client.js 或 .server.js可以作为插件文件的扩展名应用,该文件将自动包含在相应客户端或者服务端上。如果想同时在客户端和服务端运行的话,那么以.js作为插件文件的扩展名应用。

  (4)注入

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

  如果需要同时在contextVue实例,甚至Vuex中同时注入,可以使用inject方法,它是plugin导出函数的第二个参数。并且系统会自动将$添加到方法名的前面。

  (5)周期函数

  在任何Vue组件的生命周期内,只有beforeCreatecreated这两个方法会在客户端和服务端被调用。其他生命周期函数仅在客户端被调用。

 

上一篇:nuxtjs开发的ssr网站,如何在后退时返回到上次滚动位置


下一篇:nuxtjs里面使用vuex