您的位置：首页 > Web前端 > Vue.js

两种方式配置vue全局方法

2021-09-13 10:46 671 查看

[TOC]

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()，有惊喜哦

公众号

往期文章

个人主页

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航