前端-vue工程化-utils文件夹的使用

在Vue项目中，我们通常会将一些通用的工具函数组织在utils文件夹中，以便在项目的不同部分之间共享。以下是如何在Vue项目中创建和使用utils文件夹的简要说明和示例代码。

步骤1: 创建utils文件夹

在项目的src目录下创建一个名为utils的新文件夹。

步骤2: 创建工具函数

在utils文件夹中，创建一些你需要的工具函数。例如，创建一个名为util.js的文件，并添加一个简单的函数，如下所示：

// src/utils/util.js
export function helloWorld() {
  return 'Hello, World!';
}

步骤3: 在组件中使用工具函数

在Vue组件中，你可以导入并使用这些工具函数。例如：

// src/components/MyComponent.vue
<template>
  <div>{{ greeting }}</div>
</template>
 
<script>
import { helloWorld } from '@/utils/util';
 
export default {
  data() {
    return {
      greeting: helloWorld()
    };
  }
};
</script>

在这个例子中，我们导入了helloWorld函数，并在组件的数据对象中使用它来设置一个属性。这样，无论何时何地需要调用helloWorld函数，你都可以直接导入并使用它，从而保持代码的DRY（不要重复你自己）原则。