How to import functions from different js file in a Vue+ webpack + vue -loader project

In projects using Vue+webpack+Vue-loader, importing functions from different JavaScript files is a common requirement. This helps modularize functionality, improving code maintainability and reusability. I will now provide a detailed explanation of how to achieve this, along with a specific example.

Step 1: Create Functions to Export

Assume we have a utility library named utils.js located in the src/utils directory. In this file, we define some reusable functions:

javascript
// File path: src/utils/utils.js

// Define a simple function to calculate the sum of two numbers
export function add(a, b) {
    return a + b;
}

// Define another function to calculate the difference of two numbers
export function subtract(a, b) {
    return a - b;
}

Step 2: Import Functions in a Vue Component

Next, within a Vue component, we can import these functions as needed. Suppose we have a component named Calculator.vue located in the src/components directory, and we wish to use the functions provided by utils.js in this component:

vue
<template>
  <div>
    <p>{{ result }}</p>
    <button @click="calculateAdd">Calculate Sum</button>
    <button @click="calculateSubtract">Calculate Difference</button>
  </div>
</template>

<script>
// Import functions from utils.js
import { add, subtract } from '@/utils/utils';

export default {
  data() {
    return {
      a: 5,
      b: 3,
      result: 0,
    };
  },
  methods: {
    calculateAdd() {
      this.result = add(this.a, this.b);
    },
    calculateSubtract() {
      this.result = subtract(this.a, this.b);
    }
  }
}
</script>

In this component, we use the import statement to import the add and subtract functions from utils.js. Note that we use the @ symbol to represent the project's root directory (which is typically configured as src in webpack).

Step 3: Configure Path Resolution in webpack

Ensure that webpack.config.js has appropriate configuration to resolve file paths:

javascript
// webpack.config.js may contain alias configuration
module.exports = {
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src/')
    }
  }
};

Summary

Through the above steps, we can modularize and manage JavaScript functions within a Vue project. This not only makes the code clearer but also facilitates maintenance and testing. I hope this example helps you understand how to implement similar functionality in your projects.