这篇文章主要为大家展示了“如何配置vue全局方法”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“如何配置vue全局方法”这篇文章吧。
直接添加到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
优点：
定义简单
使用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
}
}
}缺点：
还没发现...
优点：
团队开发爽
以上是“如何配置vue全局方法”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
