纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

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

鹏多多   2021-09-13 我要评论
想了解配置vue全局方法的两种方式实例的相关内容吗鹏多多在本文为您仔细讲解配置vue全局方法的相关知识和一些Code实例欢迎阅读和指正我们先划重点:vue定义全局方法,vue封装全局方法,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实现上传图片添加水印的相关内容吗牛先森家的牛奶在本文为您仔细讲解vue上传图片添加水印的相关知识和一些Code实例欢迎阅读和指正我们先划重点:vue上传图片添加水印,vue图片添加水印,vue图片水印下面大家一起来学习吧..
  • C++享元模式 C++享元模式详解

    想了解C++享元模式详解的相关内容吗酸菜在本文为您仔细讲解C++享元模式的相关知识和一些Code实例欢迎阅读和指正我们先划重点:C++,C++享元模式下面大家一起来学习吧..

网友评论

Copyright 2020 www.sopisoft.net 【绿软下载站】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式