如何配置vue全局方法

这篇文章主要为大家展示了"如何配置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 = utilsnew 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_URLconst 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全局方法"这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注行业资讯频道！