vue公共js如何使用

在Vue.js项目中使用公共JS文件非常简单。1、创建公共JS文件，2、在需要的地方引入并使用，3、通过插件的方式全局注册。通过这些步骤，你可以轻松地在Vue项目中共享和复用代码。

一、创建公共JS文件

首先，你需要在项目目录下创建一个公共JS文件。通常，这个文件会放在 src 文件夹下的新文件夹中，命名为 utils 或 common。例如，你可以创建一个 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_URL = 'https://api.example.com';

二、在需要的地方引入并使用

创建公共JS文件后，你可以在任何组件或Vue实例中引入并使用这些函数或常量。使用 ES6 的 import 语法非常方便。

// 在某个Vue组件中引入
import { formatDate, API_URL } from '@/utils/common';
export default {
    name: 'MyComponent',
    data() {
        return {
            date: new Date(),
            apiUrl: API_URL
        };
    },
    methods: {
        getFormattedDate() {
            return formatDate(this.date);
        }
    }
};

三、通过插件的方式全局注册

如果你希望全局访问某些方法或常量，可以考虑将其封装为Vue插件。这样，不用每次都手动引入，而是可以通过 this 关键字直接访问。

// 创建一个插件文件 src/plugins/common.js
const CommonPlugin = {
    install(Vue) {
        Vue.prototype.$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}`;
        };
        Vue.prototype.$API_URL = 'https://api.example.com';
    }
};
export default CommonPlugin;

然后在 main.js 中使用这个插件：

// main.js
import Vue from 'vue';
import App from './App.vue';
import CommonPlugin from '@/plugins/common';
Vue.config.productionTip = false;
Vue.use(CommonPlugin);
new Vue({
    render: h => h(App),
}).$mount('#app');

现在，你可以在任何组件中通过 this.$formatDate 和 this.$API_URL 访问这些公共方法和常量。

四、在公共JS文件中使用其他库

有时候你可能会在公共JS文件中使用到第三方库。你可以直接在公共JS文件中引入这些库，并在公共方法中使用。

// 引入第三方库，比如 axios
import axios from 'axios';
export function fetchData(url) {
    return axios.get(url)
        .then(response => response.data)
        .catch(error => {
            console.error('Error fetching data:', error);
            throw error;
        });
}

五、实例说明

假设你有一个需要格式化日期和获取API数据的Vue组件，以下是如何使用公共JS文件的实例说明。

// src/components/ExampleComponent.vue
<template>
    <div>
        <p>Formatted Date: {{ formattedDate }}</p>
        <p>API Data: {{ apiData }}</p>
    </div>
</template>
<script>
import { formatDate, fetchData, API_URL } from '@/utils/common';
export default {
    data() {
        return {
            date: new Date(),
            apiData: null
        };
    },
    computed: {
        formattedDate() {
            return formatDate(this.date);
        }
    },
    mounted() {
        fetchData(API_URL + '/endpoint')
            .then(data => {
                this.apiData = data;
            })
            .catch(error => {
                console.error('Failed to fetch API data:', error);
            });
    }
};
</script>

六、总结

通过创建公共JS文件，你可以将复用性高的代码集中管理，提升代码的可维护性和可读性。总结起来，1、创建公共JS文件，2、在需要的地方引入并使用，3、通过插件的方式全局注册。这些步骤不仅可以简化代码，还可以使项目更加模块化和易于管理。

进一步的建议：在实际项目中，可以根据需求将公共JS文件进一步拆分为多个文件，每个文件负责不同的功能模块。这样可以更清晰地管理和维护代码。此外，使用TypeScript可以提高代码的类型安全性，减少潜在的错误。