配置vue全局方法的两种方式实例

 更新时间:2021年09月13日 11:49:26   作者:鹏多多  
vue项目中有一些方法需要在多个页面调用,但为了避免在每个页面都import进来,可以把方法加到原型上去,这样在每个组件中都能使用了,下面这篇文章主要给大家介绍了关于配置vue全局方法的两种方式,需要的朋友可以参考下

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
  }
 }
}

缺点:

  • 还没发现...

优点:

  • 团队开发爽

官方说明文档

总结

到此这篇关于配置vue全局方法的两种方式的文章就介绍到这了,更多相关配置vue全局方法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue element-ui实现input输入框金额数字添加千分位

    vue element-ui实现input输入框金额数字添加千分位

    这篇文章主要介绍了vue element-ui实现input输入框金额数字添加千分位,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-12-12
  • vue3项目打包成apk(android)详细图文教程

    vue3项目打包成apk(android)详细图文教程

    Vue本身是一个构建用户界面的渐进式框架,不能直接打包成APK文件,但是你可以使用工具将Vue应用打包成一个可以在Android设备上安装的APK文件,这篇文章主要给大家介绍了关于vue3项目打包成apk(android)的相关资料,需要的朋友可以参考下
    2024-05-05
  • vue如何实现关闭对话框后刷新列表

    vue如何实现关闭对话框后刷新列表

    这篇文章主要介绍了vue如何实现关闭对话框后刷新列表,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vue3如何在setup中获取元素引用(ref)

    Vue3如何在setup中获取元素引用(ref)

    这篇文章主要介绍了Vue3如何在setup中获取元素引用(ref)问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • 详解Vue3 SFC 和 TSX 方式调用子组件中的函数

    详解Vue3 SFC 和 TSX 方式调用子组件中的函数

    在使用 .vue 定义的组件中,setup 中提供了 defineExpose() 方法,该方法可以将组件内部的方法暴露给父组件,这篇文章主要介绍了Vue3 SFC 和 TSX 方式调用子组件中的函数,需要的朋友可以参考下
    2022-10-10
  • 在Vue3中使用localStorage保存数据的流程步骤

    在Vue3中使用localStorage保存数据的流程步骤

    在前端开发中,尤其是利用Vue3构建现代Web应用时,掌握如何使用本地存储(localStorage)来保存数据是非常重要的能力,在这篇博客中,我将详细介绍如何在Vue3中使用localStorage保存数据,并提供示例代码来帮助理解,需要的朋友可以参考下
    2024-06-06
  • vue单页面改造多页面应用详解

    vue单页面改造多页面应用详解

    本文主要介绍了vue单页面改造多页面应用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06
  • elementui导出数据为xlsx、excel表格

    elementui导出数据为xlsx、excel表格

    本文主要介绍了elementui导出数据为xlsx、excel表格,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • 在vue2中实现截图功能的基本步骤

    在vue2中实现截图功能的基本步骤

    在Vue 2中实现截图功能,可以使用HTML5的Canvas元素和一些JavaScript代码来捕获屏幕或特定元素的截图,以下是一个简单的步骤和示例代码来实现这个功能,需要的朋友可以参考下
    2023-10-10
  • vue3 setup中defineEmits与defineProps的使用案例详解

    vue3 setup中defineEmits与defineProps的使用案例详解

    在父组件中定义String、Number、Boolean、Array、Object、Date、Function、Symbol这些类型的数据,使用defineEmits会返回一个方法,使用一个变量emits(变量名随意)去接收,本文给大家介绍vue3 setup中defineEmits与defineProps的使用案例,感兴趣的朋友一起看看吧
    2023-10-10

最新评论