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這兩個方法會在客戶端和服務端被調用。其他生命周期函數僅在客戶端被調用。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM