兩種方式配置vue全局方法

1,前言


在Vue項目開發中,肯定會有這樣一個場景:在不同的組件頁面用到同樣的方法,比如格式化時間,文件下載,對象深拷貝,返回數據類型,復制文本等等。這時候我們就需要把常用函數抽離出來,提供給全局使用。那如何才能定義一個工具函數類,讓我們在全局環境中都可以使用呢?請看下文分解。

PS:本文vue為2.6.12

2,第一種方式


直接添加到Vue實例原型上

首先打開main.js,通過import引入定義的通用方法utils.js文件,然后使用Vue.prototype.$utils = utils,添加到Vue實例上

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import utils from './utils/Utils'

Vue.prototype.$utils = utils

new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app')

之后,在組件頁面中,需要使用的話,就是this.$utils.xxx就行了

methods: {
    fn() {
        let time = this.$utils.formatTime(new Date())
    }
}

缺點:

  • 綁定的東西多了會使vue實例過大
  • 每次使用都要加上this

優點:

  • 定義簡單

官方說明文檔

3,第二種方式


使用webpack.ProvidePlugin全局引入

首先在vue.config中引入webpackpath,然后在module.exportsconfigureWebpack對象中定義plugins,引入你需要的js文件

完整的vue.config.js配置如下:

const baseURL = process.env.VUE_APP_BASE_URL
const webpack = require('webpack')
const path = require("path")

module.exports = {
    publicPath: './',
    outputDir: process.env.VUE_APP_BASE_OUTPUTDIR,
    assetsDir: 'assets',
    lintOnSave: true,
    productionSourceMap: false,
    configureWebpack: {
        devServer: {
            open: false,
            overlay: {
                warning: true,
                errors: true,
            },
            host: 'localhost',
            port: '9000',
            hotOnly: false,
            proxy: {
                '/api': {
                    target: baseURL,
                    secure: false,
                    changeOrigin: true, //開啟代理
                    pathRewrite: {
                        '^/api': '/',
                    },
                },
            }
        },
        plugins: [
            new webpack.ProvidePlugin({
                UTILS: [path.resolve(__dirname, './src/utils/Utils.js'), 'default'], // 定義的全局函數類
                TOAST: [path.resolve(__dirname, './src/utils/Toast.js'), 'default'], // 定義的全局Toast彈框方法
                LOADING: [path.resolve(__dirname, './src/utils/Loading.js'), 'default'] // 定義的全局Loading方法
            })
        ]
    }
}

這樣定義好了之后,如果你項目中有ESlint,還需要在根目錄下的.eslintrc.js文件中,加入一個globals對象,把定義的全局函數類的屬性名啟用一下,不然會報錯找不到該屬性。

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint',
    sourceType: 'module'
  },
  env: {
    browser: true,
    node: true,
    es6: true,
  },
  "globals":{
    "UTILS": true,
    "TOAST": true,
    "LOADING": true
  }
  // ...省略N行ESlint的配置
}

定義好了之后,重啟項目, 使用起來如下:

computed: {
    playCount() {
        return (num) => {
            // UTILS是定義的全局函數類
            const count = UTILS.tranNumber(num, 0)
            return count
        }
    }
}

缺點:

  • 還沒發現...

優點:

  • 團隊開發爽

官方說明文檔


本次分享就到這兒啦,我是@鵬多多,如果您看了覺得有幫助,歡迎評論,關注,點贊,轉發,我們下次見~

PS:在本頁按F12,在console中輸入document.querySelectorAll('._2VdqdF')[0].click(),有驚喜哦

往期文章

個人主頁

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容