vue中如何實(shí)現(xiàn)注冊自定義的全局js

這篇文章給大家分享的是有關(guān)vue中如何實(shí)現(xiàn)注冊自定義的全局js的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

vue是什么

Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應(yīng)用，其核心庫只關(guān)注視圖層，方便與第三方庫和項(xiàng)目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)復(fù)雜的單頁應(yīng)用。

前端開發(fā)的時(shí)候，總會需要寫一些js方法，在vue框架中為了方便使用，可以考慮注冊一個(gè)全局的js方法，下面是注冊步驟：

1.0 可以在assets文件中的js文件下面新建一個(gè)js文件，如：yun.js---

2.0 在yun.js 上面實(shí)現(xiàn)日期格式方法，如下

import Vue from 'vue'
const format = (o, format) => { //日期類型
 let args = {　　　　
  "M+": o.getMonth() + 1,
  　　　　
  "d+": o.getDate(),
  　　　　
  "h+": o.getHours(),
  　　　　
  "m+": o.getMinutes(),
  　　　　
  "s+": o.getSeconds(),
  　　　　
  "q+": Math.floor((o.getMonth() + 3) / 3), //quarter
  "S": o.getMilliseconds()　　
 };　　
 if (/(y+)/.test(format)) format = format.replace(RegExp.$1, (o.getFullYear() + "").substr(4 - RegExp.$1.length));　　
 for (let i in args) {
  let n = args[i];　　　　
  if (new RegExp("(" + i + ")").test(format)) format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? n : ("00" + n).substr(("" + n).length));　　
 }　　
 return format;
}
export default function(Vue) {
 //添加全局API
 Vue.prototype.$yuns = {
  format
 }
}

3.0 下面將yun.js文件注冊到vue的全局中去，需要在main.js文件下面注冊全局：如圖下

4.0 前面步驟將自定義的js注冊到全局去了，后面就可以使用了，如下：

已上就是在vue中注冊全局的自定義js文件的步驟，以后需要添加js方法，就在yun.js加上去就可以調(diào)用了

補(bǔ)充：Vue自定義函數(shù)掛到全局方法

方法一:使用Vue.prototype

//在mian.js中寫入函數(shù)
Vue.prototype.getToken = function (){
 ...
}
//在所有組件里可調(diào)用函數(shù)
this.getToken();

方法二:使用exports.install+Vue.prototype

// 寫好自己需要的fun.js文件
exports.install = function (Vue, options) {
 Vue.prototype.getToken = function (){
  ...
 };
};
// main.js 引入并使用
import fun from './fun'
Vue.use(fun);
//在所有組件里可調(diào)用函數(shù)
this.getToken();

在用了exports.install方法時(shí)，運(yùn)行報(bào)錯(cuò)exports is not defined

解決方法：

export default {
 install(Vue) {
  Vue.prototype.getToken = {
   ...
  }
 }
}

方法三：使用全局變量模塊文件

Global.vue文件：

<script>
 const token='12345678';

 export default {
  methods: {
   getToken(){
    ....
   }
  }
 }
</script>

在需要的地方引用進(jìn)全局變量模塊文件，然后通過文件里面的變量名字獲取全局變量參數(shù)值。

<script>
import global from '../../components/Global'//引用模塊進(jìn)來
export default {
 data () {
  return {
   token:global.token
  }
 },
 created: function() {
  global.getToken();
 }
}
</script>

感謝各位的閱讀！關(guān)于“vue中如何實(shí)現(xiàn)注冊自定義的全局js”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！