兩種方式配置vue全域性方法

鵬多多發表於2021-09-13

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
		}
	}
}

缺點:

  • 還沒發現...

優點:

  • 團隊開發爽

官方說明文件

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


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


面向百度程式設計

公眾號

weixinQRcode.png

往期文章

個人主頁

相關文章