在Vue实例上挂载自己定义的工具类的操作方法

// utils.js
class Utils {
  // 格式化日期
  formatDate(date, format = 'YYYY-MM-DD') {
    const d = new Date(date);
    const year = d.getFullYear();
    const month = (d.getMonth() + 1).toString().padStart(2, '0');
    const day = d.getDate().toString().padStart(2, '0');
    return format.replace('YYYY', year).replace('MM', month).replace('DD', day);
  }

  // 将字符串首字母大写
  capitalize(str) {
    if (!str) return '';
    return str.charAt(0).toUpperCase() + str.slice(1);
  }
}

export default new Utils();

// main.js
import Vue from 'vue';
import App from './App.vue';
import Utils from './utils'; // 引入我们定义的工具类

Vue.config.productionTip = false;

// 将工具类挂载到Vue实例上
Vue.prototype.$utils = Utils;

new Vue({
  render: h => h(App),
}).$mount('#app');

<template>
  <div>
    <h1>工具类测试</h1>
    <p>原始日期：{{ rawDate }}</p>
    <p>格式化后的日期：{{ formattedDate }}</p>
    <p>原始字符串：{{ rawString }}</p>
    <p>首字母大写的字符串：{{ capitalizedString }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rawDate: '2024-09-05',
      rawString: 'vuejs'
    };
  },
  computed: {
    // 使用工具类的格式化日期方法
    formattedDate() {
      return this.$utils.formatDate(this.rawDate);
    },
    // 使用工具类的首字母大写方法
    capitalizedString() {
      return this.$utils.capitalize(this.rawString);
    }
  }
};
</script>

// utils-plugin.js
import Utils from './utils';

const UtilsPlugin = {
  install(Vue) {
    Vue.prototype.$utils = Utils;
  }
};

export default UtilsPlugin;

// main.js
import Vue from 'vue';
import App from './App.vue';
import UtilsPlugin from './utils-plugin'; // 引入插件

Vue.config.productionTip = false;

// 使用插件
Vue.use(UtilsPlugin);

new Vue({
  render: h => h(App),
}).$mount('#app');