關於Vue全域性方法配置的總結

2021-10-08 21:55:13 字數 1113 閱讀 5777

通過vue-cli搭建的vue專案工程中,我們通常都會或多或少地使用vue官方支援外掛程式(如router、vuex、vuei18n等)、第三方外掛程式、自定義工具函式等等,以方便我們的開發工作、優化**結構、減少**冗餘。本文就目前我所接觸到的業務需求,對vue工程中的全域性方法、屬性配置方式進行總結。

vue官方文件中對vue.use()定義如下:

即外掛程式需要支援install方法方能使用vue.use()方式在vue工程中進行全域性配置,常用的如vue-router,vuex,element ui等均支援使用vue.use()方法在main.js中進行全域性配置。

js中,可以通過物件建構函式原型掛載函式方法或變數屬性,如object.prototype.count=function()。

同理,vue.prototype掛載方式支援在例項化的vue中使用原型掛載方法或變數屬性,以axios為例,引入axios並定義vue.prototype.$axios=axios後,即可在元件中使用this.$axios.post/get/delete/put等axios封裝函式方法。即外掛程式中未定義install方法的情況下可以使用vue原型掛載方式在main.js中進行全域性配置。

嚴格來說,utils只是一種通用的程式設計思想,當然在vue工程中同樣適用。

對於常用的或工程中的特殊需求,如date的格式化轉換,在全域性中需要經常使用,則為避免**的重複貼上,可使用工具函式(util)方式,在工程中建立utils目錄及相應的util.js檔案(如date.js),便於使用。

如需全域性引入,則在main.js中import function from 'src/utils/***.js'即可。

注:記住main.js即vue專案中的主入口,專案中所有的頁面都會載入main.js。

main.js主要有三個作用:

1.例項化vue。

2.放置專案中經常會用到的外掛程式和css樣式。例如: 網路請求外掛程式:axios和vue-resource、懶載入外掛程式:vue-lazyload

3.儲存全域性變數。例如(用於的基本資訊)

vue全域性方法的配置與使用

vue專案中有一些方法需要在多個頁面呼叫,但為了避免在每個頁面都import進來,可以把方法加到原型上去,這樣在每個元件中都能使用了 寫乙個text.js檔案,裡面定義一些方法,並匯出 function text data export default 在main.js裡面import進來text....

Vue的全域性配置

vue.config.silent true 靜默 取消 日誌與警告提醒 vue.config.optionmergestrategies.my option function parent,child,vm const profile vue.extend profile.options.my o...

Vue全域性配置

vue.config.silent true取消 vue 所有的日誌與警告。vue.config.optionmergestrategies.my option function parent,child,vm const profile vue.extend profile.options.my ...