vuecli怎么定义公共js

在Vue CLI中定义公共JS的方式包括：创建一个全局JS文件、使用混入（mixins）、在Vue原型上挂载全局方法。其中，创建一个全局JS文件是一种非常灵活且易于维护的方式，可以在项目的任何地方进行调用。具体步骤如下：

首先，在项目的src目录下创建一个新的文件夹，例如utils，然后在其中创建一个新的JS文件，例如common.js。在这个文件中，你可以定义你需要的全局方法或变量。然后，在需要使用这些方法或变量的地方导入这个文件即可。

一、创建全局JS文件

创建一个全局JS文件是一种非常灵活且易于维护的方式。你可以在项目的任何地方调用这些方法，而不需要担心命名冲突或代码重复。

1. 创建文件夹和文件

在你的src目录下创建一个新的文件夹，例如utils，然后在其中创建一个新的JS文件，例如common.js。在这个文件中，你可以定义你需要的全局方法或变量。例如：

// src/utils/common.js
export function formatDate(date, format) {
    // 日期格式化的具体实现
    let formattedDate = ...;
    return formattedDate;
}
export function calculateSum(a, b) {
    return a + b;
}

2. 在需要使用的地方导入

然后，在需要使用这些方法的地方导入这个文件。例如，在一个Vue组件中：

// src/components/ExampleComponent.vue
<template>
  <div>{{ formattedDate }}</div>
</template>
<script>
import { formatDate, calculateSum } from '@/utils/common';
export default {
  data() {
    return {
      formattedDate: ''
    };
  },
  created() {
    this.formattedDate = formatDate(new Date(), 'YYYY-MM-DD');
  }
};
</script>

二、使用混入（Mixins）

混入（Mixins）是Vue提供的一种非常强大的功能，可以让你在多个组件之间共享代码。混入对象可以包含任意组件选项，当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

1. 创建混入文件

在你的src目录下创建一个新的文件夹，例如mixins，然后在其中创建一个新的JS文件，例如commonMixin.js。在这个文件中，你可以定义你需要的混入。例如：

// src/mixins/commonMixin.js
export default {
  methods: {
    formatDate(date, format) {
      // 日期格式化的具体实现
      let formattedDate = ...;
      return formattedDate;
    },
    calculateSum(a, b) {
      return a + b;
    }
  }
};

2. 在组件中使用混入

然后，在需要使用这些方法的组件中导入并使用这个混入。例如：

// src/components/ExampleComponent.vue
<template>
  <div>{{ formattedDate }}</div>
</template>
<script>
import commonMixin from '@/mixins/commonMixin';
export default {
  mixins: [commonMixin],
  data() {
    return {
      formattedDate: ''
    };
  },
  created() {
    this.formattedDate = this.formatDate(new Date(), 'YYYY-MM-DD');
  }
};
</script>

三、在Vue原型上挂载全局方法

你可以将一些全局方法挂载到Vue的原型上，这样它们就可以在任何组件中通过this关键字进行访问。需要注意的是，这种方法可能会增加全局命名空间的复杂性，因此在使用时需要谨慎。

1. 创建全局方法文件

在你的src目录下创建一个新的文件夹，例如utils，然后在其中创建一个新的JS文件，例如globalMethods.js。在这个文件中，你可以定义你需要的全局方法。例如：

// src/utils/globalMethods.js
export function formatDate(date, format) {
  // 日期格式化的具体实现
  let formattedDate = ...;
  return formattedDate;
}
export function calculateSum(a, b) {
  return a + b;
}

2. 在main.js中挂载到Vue原型

然后，在你的main.js文件中导入并挂载这些方法。例如：

// src/main.js
import Vue from 'vue';
import App from './App.vue';
import { formatDate, calculateSum } from '@/utils/globalMethods';
Vue.config.productionTip = false;
Vue.prototype.$formatDate = formatDate;
Vue.prototype.$calculateSum = calculateSum;
new Vue({
  render: h => h(App),
}).$mount('#app');

3. 在组件中使用

然后，你可以在任何组件中通过this关键字访问这些全局方法。例如：

// src/components/ExampleComponent.vue
<template>
  <div>{{ formattedDate }}</div>
</template>
<script>
export default {
  data() {
    return {
      formattedDate: ''
    };
  },
  created() {
    this.formattedDate = this.$formatDate(new Date(), 'YYYY-MM-DD');
  }
};
</script>

四、总结

在Vue CLI项目中定义公共JS文件是一个非常灵活且易于维护的方式。无论是通过创建全局JS文件、使用混入，还是在Vue原型上挂载全局方法，都可以达到共享代码的目的。每种方法都有其优点和适用场景，可以根据具体需求选择最合适的方式。此外，为了提高团队协作效率，可以考虑使用研发项目管理系统PingCode或通用项目协作软件Worktile来进行项目管理和任务分配，以确保项目的顺利进行和高效交付。