• 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这两个方法会在客户端和服务端被调用。其他生命周期函数仅在客户端被调用。

  • 相关阅读:
    Vue CLI Plugin Electron Builder 打包出现空白问题
    git 不小心提交大文件出错问题
    electron-vue创建项目
    electron ico文件问题
    多尺寸ico图标制作工具GIMP
    ps ico图标制作插件
    fluent-ffmpeg
    CopyWebpackPlugin 拷贝某个文件夹的文件到某个文件夹
    electron-vue 目录有中文打包报错问题
    js 给控件新增class
  • 原文地址:https://www.cnblogs.com/bien94/p/12590014.html
Copyright © 2020-2023  润新知