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