解決nuxt 自定義全局方法,全局屬性,全局變量的問題
注意 ，這個 在 asyncData 還是不能用的 ，在mounted等其他生命周期里面可以，
asyncData 里因為獲取不到this他在組件初始化前執(zhí)行的，如果找到方法我會繼續(xù)更新到下一篇博客
好現(xiàn)在說步驟，在plugins 文件夾里新增一個 commom.js名字你自己取
commom.js 測試代碼
import Vue from 'vue'
var comsys= {
install(Vue){
Vue.prototype.comsys = {
val:function(val){
return val
}
};
}
}
Vue.use(comsys);
nuxt.config.js里 添加
plugins:
[
{ src: '~/plugins/commom.js', ssr: false }
],
引用的頁面添加
mounted () {
alert(this.comsys.val(1));
}
恩，這樣就行了~
這個是實例方法 其他的屬性 對象 可以參考 vue的官網(wǎng)
補充知識：Nuxt項目使用全局變量，函數(shù)，混合
當(dāng)在Nuxt項目使用CSS預(yù)處理語言時，很有需要在全局添加變量，函數(shù)或者混合，這樣子在項目的任何一個地方都可以使用，那怎么做呢？
首先下載@nuxtjs/style-resources
npm install @nuxtjs/style-resources
之后在nuxt.config.js里添加
//.......
modules: [
'@nuxtjs/style-resources'
],
styleResources: {
sass: [],
scss: [],
less: [],
stylus: []
}
//.......
例如，你的使用stylus預(yù)處理語言，你在/asset/css下有個variable.styl變量文件，可以這樣
export default {
modules: ['@nuxtjs/style-resources'],
styleResources: {
stylus: './assets/css/variable.styl'
}
}
這樣就在全局引入了變量，如果想引入多個文件可以把路徑改為./assets/css/global/*.styl，把你想要全局注入的文件放在global目錄下就行了
注意：
這里的路徑不能使用~或者@等路徑別名
千萬不要用這種方式注入真正的樣式文件，這種方式僅僅是用來注入變量，函數(shù)，混合等聲明式內(nèi)容，而不是真正的樣式；如果你那樣做，會在每個組件內(nèi)注入難以控制的全局樣式，你會很混亂的
以上這篇解決nuxt 自定義全局方法,全局屬性,全局變量的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue+elementUI實現(xiàn)多文件上傳與預(yù)覽功能實戰(zhàn)記錄(word/PDF/圖片/docx/doc/xlxs/txt)
這篇文章主要給大家介紹了關(guān)于利用vue+elementUI實現(xiàn)多文件上傳與預(yù)覽功能的相關(guān)資料,包括word/PDF/圖片/docx/doc/xlxs/txt等格式文件上傳,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
這篇文章主要給大家介紹了關(guān)于關(guān)閉eslint檢查和ts檢查的相關(guān)資料,eslint是一個JavaScript的校驗插件,通常用來校驗語法或代碼的書寫風(fēng)格,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02
這篇文章主要介紹了Vue實現(xiàn)瀏覽器打印功能，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-04-04
這篇文章主要介紹了vue基于viewer實現(xiàn)的圖片查看器的實例代碼，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04
vue點擊彈窗自動觸發(fā)點擊事件的解決辦法(模擬場景)
本文通過案例場景給大家介紹vue點擊彈窗自動觸發(fā)點擊事件的解決辦法，通過兩種方法給大家分享vue 自動觸發(fā)點擊事件的處理方法，對vue自動觸發(fā)點擊事件相關(guān)知識感興趣的朋友一起看看吧2021-05-05
在本教程中，我們將探討如何在瀏覽器中使用 JavaScript 庫來操作圖片，為服務(wù)器上的存儲做準(zhǔn)備，并在 Web 程序中使用。我們將使用 Vue.js 而不是原生 JavaScript來完成此操作,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了vue中的自定義分頁插件組件的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
vuejs2.0運用原生js實現(xiàn)簡單拖拽元素功能
這篇文章主要為大家詳細(xì)介紹了vuejs2.0運用原生js實現(xiàn)簡單拖拽元素功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
跨域問題的出現(xiàn)是因為瀏覽器的同源策略問題，如果沒有同源策略我們的瀏覽器將會十分的不安全，隨時都可能受到攻擊，今天小編通過本文給大家介紹下vue 處理跨域問題，感興趣的朋友一起看看吧2021-09-09
本文通過實例代碼給大家介紹了Vue表單demo v-model雙向綁定問題,代碼簡單易懂非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-06-06