您好,登录后才能下订单哦!
这篇文章主要为大家展示了“如何配置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全局方法”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。