配置vue全局方法的兩種方式實(shí)例
1，前言
在Vue項(xiàng)目開發(fā)中，肯定會有這樣一個(gè)場景：在不同的組件頁面用到同樣的方法，比如格式化時(shí)間，文件下載，對象深拷貝，返回?cái)?shù)據(jù)類型，復(fù)制文本等等。這時(shí)候我們就需要把常用函數(shù)抽離出來，提供給全局使用。那如何才能定義一個(gè)工具函數(shù)類，讓我們在全局環(huán)境中都可以使用呢？請看下文分解。
PS：本文vue為2.6.12
2，第一種方式
直接添加到Vue實(shí)例原型上
首先打開main.js，通過import引入定義的通用方法utils.js文件，然后使用Vue.prototype.$utils = utils，添加到Vue實(shí)例上
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())
}
}
缺點(diǎn)：
- 綁定的東西多了會使vue實(shí)例過大
- 每次使用都要加上this
優(yōu)點(diǎn)：
- 定義簡單
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'], // 定義的全局函數(shù)類
TOAST: [path.resolve(__dirname, './src/utils/Toast.js'), 'default'], // 定義的全局Toast彈框方法
LOADING: [path.resolve(__dirname, './src/utils/Loading.js'), 'default'] // 定義的全局Loading方法
})
]
}
}
這樣定義好了之后，如果你項(xiàng)目中有ESlint，還需要在根目錄下的.eslintrc.js文件中，加入一個(gè)globals對象，把定義的全局函數(shù)類的屬性名啟用一下，不然會報(bào)錯(cuò)找不到該屬性。
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的配置
}
定義好了之后，重啟項(xiàng)目， 使用起來如下：
computed: {
playCount() {
return (num) => {
// UTILS是定義的全局函數(shù)類
const count = UTILS.tranNumber(num, 0)
return count
}
}
}
缺點(diǎn)：
- 還沒發(fā)現(xiàn)...
優(yōu)點(diǎn)：
- 團(tuán)隊(duì)開發(fā)爽
總結(jié)
到此這篇關(guān)于配置vue全局方法的兩種方式的文章就介紹到這了,更多相關(guān)配置vue全局方法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue element-ui實(shí)現(xiàn)input輸入框金額數(shù)字添加千分位
這篇文章主要介紹了vue element-ui實(shí)現(xiàn)input輸入框金額數(shù)字添加千分位,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-12-12
vue3項(xiàng)目打包成apk(android)詳細(xì)圖文教程
Vue本身是一個(gè)構(gòu)建用戶界面的漸進(jìn)式框架,不能直接打包成APK文件,但是你可以使用工具將Vue應(yīng)用打包成一個(gè)可以在Android設(shè)備上安裝的APK文件,這篇文章主要給大家介紹了關(guān)于vue3項(xiàng)目打包成apk(android)的相關(guān)資料,需要的朋友可以參考下2024-05-05
vue如何實(shí)現(xiàn)關(guān)閉對話框后刷新列表
這篇文章主要介紹了vue如何實(shí)現(xiàn)關(guān)閉對話框后刷新列表，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue3如何在setup中獲取元素引用(ref)問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
詳解Vue3?SFC?和?TSX?方式調(diào)用子組件中的函數(shù)
在使用?.vue?定義的組件中，setup?中提供了?defineExpose()?方法，該方法可以將組件內(nèi)部的方法暴露給父組件，這篇文章主要介紹了Vue3?SFC?和?TSX?方式調(diào)用子組件中的函數(shù),需要的朋友可以參考下2022-10-10
在Vue3中使用localStorage保存數(shù)據(jù)的流程步驟
在前端開發(fā)中,尤其是利用Vue3構(gòu)建現(xiàn)代Web應(yīng)用時(shí),掌握如何使用本地存儲（localStorage）來保存數(shù)據(jù)是非常重要的能力,在這篇博客中,我將詳細(xì)介紹如何在Vue3中使用localStorage保存數(shù)據(jù),并提供示例代碼來幫助理解,需要的朋友可以參考下2024-06-06
本文主要介紹了vue單頁面改造多頁面應(yīng)用詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
elementui導(dǎo)出數(shù)據(jù)為xlsx、excel表格
本文主要介紹了elementui導(dǎo)出數(shù)據(jù)為xlsx、excel表格，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
在Vue 2中實(shí)現(xiàn)截圖功能,可以使用HTML5的Canvas元素和一些JavaScript代碼來捕獲屏幕或特定元素的截圖,以下是一個(gè)簡單的步驟和示例代碼來實(shí)現(xiàn)這個(gè)功能,需要的朋友可以參考下2023-10-10
vue3 setup中defineEmits與defineProps的使用案例詳解
在父組件中定義String、Number、Boolean、Array、Object、Date、Function、Symbol這些類型的數(shù)據(jù),使用defineEmits會返回一個(gè)方法,使用一個(gè)變量emits(變量名隨意)去接收,本文給大家介紹vue3 setup中defineEmits與defineProps的使用案例,感興趣的朋友一起看看吧2023-10-10