如何在 Vue3 项目配置全局方法

前言

大家都知道 Vue2 项目配置全局方法最简单就是使用【Vue.prototype.$XXX = XXX】这种实现方式。如该文章【https://blog.csdn.net/Cai181191/article/details/123797934】就是用这种方式来实现，然而 Vue3 项目实现配置全局方法可能就有点不一样了。

一、引入 Moment.js 日期处理类库并配置为全局方法

1.官网传送门

http://momentjs.cn/

        

          
        
        
        

          

          AI 代码解读
        
      
      

2.导入依赖

npm i moment

        

          
        
        
        

          

          AI 代码解读
        
      
      

3.示例代码

（1）/src/utils/momentUtil.js

import moment from 'moment';

const YYYY_MM_DD = (time) => {
   
  if (time) {
   
    return moment(time).format('YYYY-MM-DD')
  } else {
   
    return ''
  }
}

const YYYY_MM_DD__HH_mm_ss = (time) => {
   
  if (time) {
   
    return moment(time).format('YYYY-MM-DD HH:mm:ss')
  } else {
   
    return ''
  }
}

export {
   
  YYYY_MM_DD,
  YYYY_MM_DD__HH_mm_ss
}

        

          
        
        
        

          

          AI 代码解读
        
      
      

（2）main.js

// 引入格式化时间工具并配置为全局方法
import * as momentUtil from '@/utils/momentUtil'
app.config.globalProperties.$momentUtil = momentUtil

        

          
        
        
        

          

          AI 代码解读
        
      
      

4.使用方式

<div>{
  { $momentUtil.YYYY_MM_DD(scope.row.createTime) }}</div>

        

          
        
        
        

          

          AI 代码解读
        
      
      

二、生成字符串对应的颜色值并配置为全局方法

1.示例代码

（1）/src/utils/colorUtil.js

const stringToColor = (str) => {
   
  if (str) {
   
    let hash = 0
    for (var i = 0; i < str.length; i++) {
   
      hash = hash * 31 + str.charCodeAt(i)
      hash = intValue(hash)
    }
    let r = (hash & 0xFF0000) >> 16
    let g = (hash & 0x00FF00) >> 8
    let b = (hash & 0x0000FF)
    return 'rgba(' + r + ',' + g + ',' + b + ',' + '0.2)'
  } else {
   
    return 'transparent' // 透明
  }
}

function intValue(num) {
   
  var MAX_VALUE = 0x7fffffff;
  var MIN_VALUE = -0x80000000;
  if (num > MAX_VALUE || num < MIN_VALUE) {
   
    return num &= 0xFFFFFFFF;
  }
  return num;
}

export {
   
  stringToColor
}

        

          
        
        
        

          

          AI 代码解读
        
      
      

（2）main.js

// 引入颜色工具并配置为全局方法
import * as colorUtil from '@/utils/colorUtil'
app.config.globalProperties.$colorUtil = colorUtil

        

          
        
        
        

          

          AI 代码解读
        
      
      

2.使用方式

<p :style="'color: ' + $colorUtil.stringToColor('HelloWorld')">HelloWorld</p>

        

          
        
        
        

          

          AI 代码解读