创建独立的JS文件-然后在文件夹里创建一个-这样做不仅让代码更模块化、更易维护还能提高代码复用率

作者：机器人技术佬 | 发布时间：2025-07-09 |

一、创建独立的JS文件

得自己动手创建一个JS文件，用来存放那些你想让多个组件共用的方法。

在项目的src目录下，新建一个文件夹，比如叫utils。然后在文件夹里创建一个JS文件，比如叫commonMethods.js。

在文件里定义你想要封装的方法：

```javascript // commonMethods.js export function someMethod() { // 你的方法代码 } ```

二、在Vue组件中导入

然后，你得告诉Vue组件去哪里找这个JS文件。

打开你想要使用这些方法的Vue组件文件，比如MyComponent.vue。

在组件的顶部，用import关键字导入刚才创建的JS文件中的方法：

```javascript // MyComponent.vue import { someMethod } from '@/utils/commonMethods'; export default { // ... methods: { doSomething() { someMethod(); } } } ```

三、在组件中调用

最后一步，就是在组件的模板或方法中实际调用这些封装的方法。

打开组件的模板文件，比如MyComponent.vue。

在模板里调用这些方法来显示或处理数据：

```html ```

或者在组件的方法中调用封装的方法，完成所需的逻辑：

```javascript // MyComponent.vue export default { // ... methods: { doSomething() { someMethod(); // 其他逻辑 } } } ```

通过创建独立的JS文件、导入和调用这些步骤，你就能在Vue应用中有效地封装和共享JS方法了。这样做不仅让代码更模块化、更易维护，还能提高代码复用率。

进一步的建议是，将公共方法放在独立的工具文件中，并根据项目需求进行优化和调整。