我的编程空间,编程开发者的网络收藏夹
学习永远不晚

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

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

配置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, './class="lazy" data-src/utils/Utils.js'), 'default'], // 定义的全局函数类
    TOAST: [path.resolve(__dirname, './class="lazy" data-src/utils/Toast.js'), 'default'], // 定义的全局Toast弹框方法
    LOADING: [path.resolve(__dirname, './class="lazy" data-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全局方法内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

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

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

SpringBoot实现全局和局部跨域的两种方式

本文主要介绍了SpringBoot实现全局和局部跨域的两种方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2023-01-08

mybatis 加载配置文件的方法(两种方式)

一. 使用sqlSessionFactory 的 mapperLocations 进行加载, 2023-05-30

Vue弹窗的两种实现方式实例详解

这篇文章主要介绍了Vue弹窗的两种实现方式,一种使用.sync修饰符另一种使用v-model,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
2022-11-13

vue中全局方法和实例方法的区别有哪些

这篇文章主要介绍“vue中全局方法和实例方法的区别有哪些”,在日常操作中,相信很多人在vue中全局方法和实例方法的区别有哪些问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue中全局方法和实例方法的区别有哪些
2023-06-22

实现Vue-router编程式导航的两种方法

这篇文章主要介绍“实现Vue-router编程式导航的两种方法”,在日常操作中,相信很多人在实现Vue-router编程式导航的两种方法问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”实现Vue-router编
2023-06-06

android 设置全屏的两种方法

现在android的每一个项目都会需要设置为全屏,现在介绍两种设置为全屏的方式。 一、在配置文件中设置android:theme=”@android:style/Theme.Light.NoTitleBar.Fullscreen” 如:二、
2022-06-06

vue实现上传按钮的样式的两种方法

这篇文章主要介绍了vue定制上传按钮的样式的两种方法,本文结合示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2022-12-24

app.json文件全局配置的方法

本文小编为大家详细介绍“app.json文件全局配置的方法”,内容详细,步骤清晰,细节处理妥当,希望这篇“app.json文件全局配置的方法”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。  app.json文件用
2023-06-26

Spring Boot DevTools全局配置的方法

这篇文章主要讲解了“Spring Boot DevTools全局配置的方法”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Spring Boot DevTools全局配置的方法”吧!一、直接重
2023-06-29

Vue脚手架配置代理服务器的两种方式(小结)

本文主要介绍了Vue脚手架配置代理服务器的两种方式(小结),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2023-01-08

mysql模糊匹配多个值的两种方法实例

目录要求:实现mysql中对同个字段进行多个匹配值的模糊查询方法一:将like作为连接条件方法二:正则表达式搭配group_concat函数总结要求:实现mysql中对同个字段进行多个匹配值的模糊查询先看数据表:目标是在user表中,匹配
2022-12-15

Vue实现全局的toast组件方式

这篇文章主要介绍了Vue实现全局的toast组件方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
2023-03-06

vue如何定义全局变量和全局方法实例代码

在项目中经常会复用一些变量和函数,比如用户的登录token,用户信息等,这时将它们设为全局的就显得很重要了,下面这篇文章主要给大家介绍了关于vue如何定义全局变量和全局方法的相关资料,需要的朋友可以参考下
2023-05-17

编程热搜

目录