vue怎么导入自己写的js文件

在Vue项目中导入自己编写的JavaScript文件，可以通过以下几种方式：使用import语句、在mounted生命周期钩子中引入、通过全局引用。其中，使用import语句是最为推荐和常用的方法，因为它符合模块化开发的规范，易于管理和调试。接下来，我将详细介绍这几种方法，并提供相关示例代码。

一、使用`import`语句

1.1 创建JavaScript文件

首先，在项目的src目录下创建一个JavaScript文件。例如，我们创建一个名为utils.js的文件。

// src/utils.js
export function greet(name) {
    return `Hello, ${name}!`;
}

1.2 在Vue组件中导入

在你需要使用这个函数的Vue组件中，通过import语句导入并使用。

<template>
    <div>
        {{ message }}
    </div>
</template>
<script>
import { greet } from './utils';
export default {
    data() {
        return {
            message: ''
        };
    },
    created() {
        this.message = greet('Vue Developer');
    }
};
</script>

这种方法不仅简单直接，而且符合现代JavaScript模块化开发的规范，便于维护和管理代码。

二、在`mounted`生命周期钩子中引入

2.1 创建JavaScript文件

同样，首先创建一个JavaScript文件，如utils.js。

// src/utils.js
function greet(name) {
    return `Hello, ${name}!`;
}
window.greet = greet; // 将函数挂载到全局对象上

2.2 在Vue组件中使用

在Vue组件的mounted生命周期钩子中使用这个全局函数。

<template>
    <div>
        {{ message }}
    </div>
</template>
<script>
export default {
    data() {
        return {
            message: ''
        };
    },
    mounted() {
        this.message = window.greet('Vue Developer');
    }
};
</script>

这种方法虽然可以实现需求，但不推荐使用，因为它会污染全局命名空间，不利于代码的维护。

三、通过全局引用

3.1 在主入口文件中引入

在Vue项目的主入口文件main.js中引入并挂载到Vue的原型上。

// src/utils.js
export function greet(name) {
    return `Hello, ${name}!`;
}
// src/main.js
import Vue from 'vue';
import App from './App.vue';
import { greet } from './utils';
Vue.prototype.$greet = greet;
new Vue({
    render: h => h(App),
}).$mount('#app');

3.2 在Vue组件中使用

在Vue组件中通过this.$greet调用该函数。

<template>
    <div>
        {{ message }}
    </div>
</template>
<script>
export default {
    data() {
        return {
            message: ''
        };
    },
    created() {
        this.message = this.$greet('Vue Developer');
    }
};
</script>

这种方法适用于需要在多个组件中频繁使用的工具函数，但同样需要注意避免污染全局命名空间。

四、总结

在Vue项目中导入自己编写的JavaScript文件可以通过多种方式实现，包括使用import语句、在mounted生命周期钩子中引入、通过全局引用。最推荐的方法是使用import语句，因为它符合现代JavaScript模块化开发的规范，易于管理和调试。如果你需要更强大的项目管理和协作工具，可以考虑使用研发项目管理系统PingCode和通用项目协作软件Worktile，这两个系统可以帮助你更高效地管理项目进度和团队协作。