vuecli怎么定义一个公共js

在Vue CLI中定义一个公共JS文件的最佳实践包括：创建一个独立的JS文件、将其引入到主入口文件、使用Vue的混入功能、在Vue实例或全局注册中使用。 下面将详细介绍如何在Vue CLI项目中定义和使用一个公共JS文件。

一、创建独立的JS文件

在Vue CLI项目中，首先需要创建一个独立的JS文件来存放公共函数或变量。可以在src目录下创建一个utils文件夹，并在其中创建一个名为common.js的文件。

// src/utils/common.js
export function formatDate(date) {
  // 格式化日期函数
  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 `${year}-${month}-${day}`;
}
export const API_BASE_URL = 'https://api.example.com';

二、在主入口文件中引入公共JS文件

在main.js或main.ts文件中引入刚刚创建的公共JS文件，这样可以确保公共函数在整个应用中都可以使用。

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

三、使用Vue的混入功能

混入（Mixins）是Vue.js中一种非常灵活的方式，可以将可复用的功能分发到多个组件中。你可以创建一个混入文件，并在各个组件中引入。

// src/mixins/commonMixin.js
export const commonMixin = {
  methods: {
    formatDate(date) {
      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 `${year}-${month}-${day}`;
    }
  },
  data() {
    return {
      API_BASE_URL: 'https://api.example.com'
    };
  }
};

在组件中使用混入：

// src/components/ExampleComponent.vue
<template>
  <div>
    <p>{{ formatDate(new Date()) }}</p>
    <p>{{ API_BASE_URL }}</p>
  </div>
</template>
<script>
import { commonMixin } from '@/mixins/commonMixin';
export default {
  mixins: [commonMixin],
};
</script>

四、在Vue实例或全局注册中使用

可以在Vue的实例方法或全局注册中使用公共函数或变量，从而在整个应用中直接调用。

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

在组件中使用：

// src/components/ExampleComponent.vue
<template>
  <div>
    <p>{{ $formatDate(new Date()) }}</p>
    <p>{{ $API_BASE_URL }}</p>
  </div>
</template>
<script>
export default {
  name: 'ExampleComponent',
};
</script>

五、使用Webpack的别名配置

为了更方便地引入公共JS文件，可以使用Webpack的别名配置。在vue.config.js文件中配置别名。

// vue.config.js
module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@utils': '@/utils'
      }
    }
  }
};

这样在需要引入公共JS文件时，可以使用别名。

// src/main.js
import { formatDate, API_BASE_URL } from '@utils/common';
Vue.prototype.$formatDate = formatDate;
Vue.prototype.$API_BASE_URL = API_BASE_URL;

六、总结

在Vue CLI中定义一个公共JS文件有多种方式，每种方式都有其独特的优势。创建独立的JS文件、在主入口文件中引入、使用Vue的混入功能、在Vue实例或全局注册中使用，这些方法可以帮助开发者更高效地管理和复用代码。在实际开发中，可以根据具体需求选择最适合的方式，以提高项目的开发效率和代码的可维护性。

七、推荐工具

在项目团队管理系统中，推荐使用研发项目管理系统PingCode和通用项目协作软件Worktile。这两个系统能够帮助团队更好地协作和管理项目，提高开发效率和团队协作能力。