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中引入webpack和path，然後在module.exports的configureWebpack物件中定義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

		}

	}

}

缺點：

  • 還沒發現...

優點：

  • 團隊開發爽

官方說明文件

如果看了覺得有幫助的，我是@鵬多多，歡迎 點贊 關注 評論；END

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

公眾號

往期文章

個人主頁