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

Vue引入自己写的JS文件的方法有多种，包括直接在HTML中引入、在Vue组件中引入、以及通过Vue实例的生命周期钩子引入等。最常见的方式有：在script标签中引入、在Vue组件中通过import引入、使用Vue实例的生命周期钩子。其中，通过import方式引入是现代开发中最推荐的方法，因为它可以更好地利用模块化、代码分离和打包优化的优势。

要详细描述其中一种方法，我们可以重点介绍如何在Vue组件中通过import引入自定义的JS文件。这种方法不仅符合现代JavaScript模块化的理念，而且与Vue的单文件组件（SFC）无缝集成。

一、在HTML中引入

1、直接在HTML中引入

这种方法适用于简单的项目，直接在你的index.html文件中通过<script>标签引入你的JS文件：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue App</title>
</head>
<body>
  <div id="app"></div>
  <script src="path/to/your/custom.js"></script>
  <script src="/dist/build.js"></script>
</body>
</html>

在这种情况下，custom.js文件将在Vue实例初始化之前加载。这种方法适用于简单的项目或者一些全局的工具函数，但不推荐用于复杂应用，因为它无法利用模块化的优势。

二、在Vue组件中引入

1、通过`import`引入

在Vue组件中，我们可以通过ES6的import语法来引入自定义的JS文件。这种方法不仅符合现代JavaScript的开发规范，而且可以充分利用模块化的优势。

首先，确保你的自定义JS文件是一个模块。例如，在src/utils/custom.js中：

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

然后，在你的Vue组件中引入这个模块：

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

在这个示例中，我们在Vue组件的created生命周期钩子中调用了greet函数，并将其结果赋值给message数据属性。

2、使用Vue实例的生命周期钩子

这种方法适用于需要在特定生命周期阶段执行的代码。假设我们有一个自定义的JS文件，它包含一些初始化逻辑：

// src/utils/init.js
export function init() {
  console.log('Initialization logic here');
}

然后在你的Vue组件中引入并调用：

<template>
  <div>
    <p>Check the console for initialization message.</p>
  </div>
</template>
<script>
import { init } from '@/utils/init';
export default {
  created() {
    init();
  }
};
</script>

通过这种方式，我们可以确保在Vue实例创建时执行自定义的初始化逻辑。

三、其他方法

1、使用Vue插件机制

如果你的自定义JS文件包含一组功能，可以考虑将其封装成一个Vue插件。这样，你可以在整个应用范围内使用这些功能。

假设我们有一个自定义的插件文件：

// src/plugins/customPlugin.js
export default {
  install(Vue) {
    Vue.prototype.$greet = function(name) {
      return `Hello, ${name}!`;
    };
  }
};

然后在你的main.js中引入并使用这个插件：

import Vue from 'vue';
import App from './App.vue';
import CustomPlugin from '@/plugins/customPlugin';
Vue.use(CustomPlugin);
new Vue({
  render: h => h(App)
}).$mount('#app');

在你的Vue组件中，你可以通过this.$greet来调用插件中的方法：

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

通过这种方式，你可以在整个应用范围内使用自定义的JS功能，且无需在每个组件中重复引入。

2、使用Webpack的别名

在大型项目中，我们可以使用Webpack的别名功能来简化模块的引入路径。假设我们在vue.config.js中配置了一个别名：

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@utils': path.resolve(__dirname, 'src/utils')
      }
    }
  }
};

这样，我们可以在Vue组件中使用别名来引入自定义的JS文件：

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

这种方法不仅简化了引入路径，而且提高了代码的可读性和维护性。

四、整合第三方库

除了引入自定义的JS文件，我们还可以通过类似的方法引入和使用第三方库。例如，我们可以通过npm或yarn安装一个第三方库，并在Vue组件中引入：

npm install lodash

然后在Vue组件中使用：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
<script>
import _ from 'lodash';
export default {
  data() {
    return {
      message: ''
    };
  },
  created() {
    this.message = _.join(['Hello', 'Vue User'], ' ');
  }
};
</script>

通过这种方式，我们可以充分利用第三方库的功能，提升开发效率和代码质量。

五、使用项目团队管理系统

在实际开发中，管理和协作也是至关重要的一环。推荐使用研发项目管理系统PingCode和通用项目协作软件Worktile来提升团队协作效率。

1、PingCode

PingCode是一款专业的研发项目管理系统，提供了需求管理、缺陷管理、迭代管理等功能。它可以帮助团队更好地管理开发过程，提升项目质量。

2、Worktile

Worktile是一款通用的项目协作软件，提供了任务管理、文档管理、团队沟通等功能。它可以帮助团队更高效地协作，提升工作效率。

通过使用这些项目管理工具，我们可以更好地管理项目进度、分配任务和沟通协作，从而提升整个开发团队的工作效率。

总结起来，Vue引入自定义JS文件的方法多种多样，包括在HTML中引入、在Vue组件中引入、使用Vue插件机制等。每种方法都有其适用的场景和优势，开发者可以根据项目需求选择合适的方法。同时，结合使用项目管理工具，可以进一步提升开发团队的协作效率和项目质量。