js-Vue创建公共的JavaScript工具类

        Vue前端项目中创建了一个公共的JavaScript工具类，并定义了一些公共方法后，可以在需要的组件中引用并调用这些公共方法。

        1.创建一个名为 utils.js 的JavaScript文件，定义一个公共的工具类，包含一个用于计算平方的方法：

// utils.js

export default {
  square(num) {
    return num * num;
  },
};

        2.在需要使用计算平方功能的Vue组件中，引入并调用 utils.js 中定义的方法：

<template>
  <div>
    <p>Enter a number:</p>
    <input type="number" v-model="number">
    <button @click="calculateSquare">Calculate Square</button>
    <p v-if="result !== null">Square of {{ number }} is: {{ result }}</p>
  </div>
</template>

<script>
import utils from './utils.js';

export default {
  data() {
    return {
      number: null,
      result: null,
    };
  },
  methods: {
    calculateSquare() {
      if (this.number !== null) {
        this.result = utils.square(this.number);
      }
    },
  },
};
</script>

         建了一个名为 utils.js 的公共工具类，并在其中定义了一个 square 方法用于计算数字的平方。然后，在需要使用计算平方功能的Vue组件中，通过引入 utils.js 文件并调用 square 方法来计算输入数字的平方，并将结果显示在页面上。这样就实现了在Vue组件中引用并调用公共JavaScript工具类中的方法。