美文网首页VueVue2收藏
vue全局方法两种方式配置

vue全局方法两种方式配置

作者: 宏_4491 | 来源:发表于2021-11-23 10:09 被阅读0次

在不同的组件页面用到同样的方法,比如格式化时间,文件下载,对象深拷贝,返回数据类型,复制文本等等。这时候我们就需要把常用函数抽离出来,提供给全局使用。那如何才能定义一个工具函数类,让我们在全局环境中都可以使用

第一种

  • 直接添加到Vue实例原型上(缺点就是绑定的东西多了会使vue实例过大)
//main.js 里面
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')

//组件中使用
methods: {
    fn() {
        let time = this.$utils.formatTime(new Date())
    }
}

第二种方式

  • 使用webpack.ProvidePlugin全局引入
    首先在vue.config中引入webpack和path,然后在module.exports的configureWebpack对象中定义plugins,引入你需要的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
        }
    }
}

//本文出自https://www.jianshu.com/p/a1e08d3c990c

相关文章

  • 两种方式配置vue全局方法

    1,前言 在Vue项目开发中,肯定会有这样一个场景:在不同的组件页面用到同样的方法,比如格式化时间,文件下载,对象...

  • vue全局方法两种方式配置

    在不同的组件页面用到同样的方法,比如格式化时间,文件下载,对象深拷贝,返回数据类型,复制文本等等。这时候我们就需要...

  • maven中如何指定jdk的版本

    maven中jdk的配置分为全局配置和局部配置两种方式。 一、全局配置 全局配置是指在${MAVEN_HOME}\...

  • vue-router与react-router的区别

    vue-router是全局配置方式,react-router是全局组件方式。vue-router仅支持对象形式的配...

  • 2018-07-02 Vue源码解析阅读笔记

    合并配置 在new Vue()初始化时,会通过mergeOptions()的方法,把全局变量、全局方法、全局组件等...

  • Vue组件

    测试代码 创键组件 两种方式:方法一:使用Vue.extend({}) 方法二:使用字面量 注册组件 全局注册语法...

  • 8 个非常实用的 Vue 自定义指令

    Vue 自定义指令有全局注册和局部注册两种方式。先来看看注册全局指令的方式,通过 Vue.directive( i...

  • 20200816

    Vue全局API汇总 全局配置 Vue.config 是全局配置对象。 silent 默认false,是否取消Vu...

  • Vue全局方法配置

    在Vue项目开发中,肯定会有这样一个场景:在不同的组件页面用到同样的方法,比如格式化时间,文件下载,对象深拷贝,返...

  • 手动抛出Vue全局异常捕获

    一、自定义方法errorHandler Vue全局配置errorHandler可以进行全局错误收集,我们可以根据这...

网友评论

    本文标题:vue全局方法两种方式配置

    本文链接:https://www.haomeiwen.com/subject/dzxwtrtx.html