Vue配置全局函数
⽅法1：通过Vue.prototype实现
注册全局函数
import utils from './utils/Utils'
Vue.prototype.$utils = utils
// 或者直接
Vue.prototype.changeData = function (){//changeData是函数名
函数prototypealert('执⾏成功');
}
页⾯使⽤
//直接通过this运⾏函数
this.$
// 或者
this.changeData();
缺点：
绑定的东西多了会使vue实例过⼤
每次使⽤都要加上this
优点：
定义简单
⽅法2：使⽤use，将全局函数当做插件来进⾏注册
js函数⽂件
exports.install = function (Vue, options) {
1 = function (){//全局函数1
alert('执⾏成功1');
};
2 = function (){//全局函数2
alert('执⾏成功2');
};
};
main.js中
import base from './base'//引⽤
Vue.use(base);//将全局函数当做插件来进⾏注册
使⽤
<1();
<2();
⽅法3：使⽤webpack.ProvidePlugin全局引⼊
⾸先在fig中引⼊webpack和path，然后在ports的configureWebpack对象中定义plugins，引⼊你需要的js⽂件完整的fig.js配置如下：
const webpack = require('webpack')
const path = require("path")
.......
configureWebpack: {
.........
plugins: [
new webpack.ProvidePlugin({
ROLE: solve(__dirname, './src/utils/role.js') // 定义的全局函数类
})
]
}
}
对于 ES2015 模块的 default export，你必须指定模块的 default 属性：
new webpack.ProvidePlugin({
identifier: ['module-name', 'property'],
// ...etc.
});
⽰例：
new webpack.ProvidePlugin({
ROLE: [solve(__dirname, './src/utils/role.js'), 'default'],
});
也就是通过标记default，webpack编译的时候就只识别export default导出的函数；如果不标记，那就也识别export导出函数
.eslintrc.js⽂件配置
加⼊⼀个globals对象，把定义的全局函数类的属性名启⽤⼀下，不然会报错不到该属性。
"globals":{
"ROLE": true,
}
}
使⽤
重启项⽬，然后调⽤
ROLE.hasRole()
缺点：
该⽅法中如果导出的是⼀个动态值
export const userRoles = ().map(item => leName)
那么rolesStore的变化，不会导致userRoles的变化
如果想要userRoles随时随地都能获取最新的值，那么可以将上⾯变量改成函数即可，因为函数在被调⽤的时候会重新执⾏，从⽽获取最新的值。
export const userRoles = () => {
().map(item => leName)
}
如果函数内部使⽤的也是该页⾯的动态变量，⽐如rolesStore，那么也需要将rolesStore改成函数形式调⽤。
猜想原因：该全局函数⽅法使⽤的是静态模式，不会重复赋值⼀个变量，但是函数在被调⽤的时候会重新执⾏。
优点：
利于团队开发
不⽤到处import或者require
来源

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。