Vue 项目中引入与使用 JS 文件

在 Vue 项目开发过程中，引入和使用 JS 文件是一项常见且重要的操作，它能够帮助我们更好地组织代码，提升项目的可维护性与扩展性。

谈谈如何在 Vue 项目中引入 JS 文件。在 Vue 组件里，我们主要通过 import 语句来引入。如果要引入的是一个自定义的 JS 文件，比如在项目根目录下创建了一个名为 utils.js 的工具函数文件，在需要使用的组件中，可以这样写：import { functionName } from '@/utils.js'; 这里的 @ 是 Vue 项目默认配置的别名，指向 src 目录，使用别名能让路径书写更简洁。若引入的是第三方库，例如 lodash，通常只需 import _ from 'lodash'; 即可，因为第三方库在项目安装时已经被正确配置到了依赖路径中。

引入 JS 文件后，接下来就是如何使用它。假设在 utils.js 文件里定义了一个函数 formatDate，用于格式化日期。引入后，就可以在组件的方法中调用这个函数。比如：

<template>
  <div>
    <p>{{ formattedDate }}</p>
  </div>
</template>

<script>
import { formatDate } from '@/utils.js';

export default {
  data() {
    return {
      date: new Date(),
      formattedDate: ''
    };
  },
  mounted() {
    this.formattedDate = formatDate(this.date);
  }
};
</script>

在上述代码中，组件挂载时调用 formatDate 函数对日期进行格式化，并将结果赋值给 formattedDate 变量显示在模板中。

另外，在 Vue 项目中，还可以通过 export default 导出一个对象来定义多个函数或数据，在引入时直接导入这个对象。例如在 utils.js 中：

export default {
  formatDate(date) {
    // 格式化逻辑
  },
  anotherFunction() {
    // 其他功能逻辑
  }
};

引入时：import utils from '@/utils.js';，使用时通过 utils.formatDate 或 utils.anotherFunction 调用相应功能。

掌握 Vue 项目中 JS 文件的引入与使用，能够让我们在开发过程中更高效地利用代码资源，构建出结构清晰、功能强大的应用程序。