How to import js in main.js in uniapp

UNIAPP is a front-end framework that supports multi-platform development. Its excellent cross-platform capabilities, flexible scalability and powerful performance allow developers to easily publish applications to on multiple platforms. In UNIAPP, main.js is an important startup file. Its main function is to perform global initialization and configuration, including importing JS files. Let's take a look at how to import JS files in UNIAPP.

1. Import JS files in main.js

In UNIAPP, you can import JS files anywhere in main.js. It can be placed at the top level or at the bottom level. , are all possible. The specific steps are as follows:

1. Add the following code to main.js:

import "./util.js";

2. Place the JS files that need to be imported into the util.js file in the project directory. .

3. Add custom functions or variables in the util.js file, for example:

function sum(a, b) {
   return a + b;
}
export default sum;

2. Use JS files in Vue components

When we add JS After the file is successfully imported into the main.js file, the JS file can be used in all Vue components. For the convenience of demonstration, we show the specific process in a Vue component.

1. Add the following code to the HelloWorld.vue file:

<script>
import { sum } from "@/util.js";

export default {
  data() {
    return {
      num1: 1,
      num2: 2,
    };
  },
  methods: {
    handleClick() {
      const result = sum(this.num1, this.num2);
      console.log(result);
    },
  },
};
</script>

2. Add custom functions or variables to the util.js file, for example:

export function sum(a, b) {
  return a + b;
}

3. Summary

In UNIAPP, importing JS files is very simple. You only need to add code to the main.js file. Because the main.js file is the entry file for global initialization, global configuration and import can be performed in this file. At the same time, it is also very convenient to use JS files in Vue components. You only need to import them in the components you need to use. In addition, it is worth noting that when importing JS files in Vue components, you need to use relative paths or the @ symbol, otherwise an error that cannot be loaded will occur.

The above is the detailed content of How to import js in main.js in uniapp. For more information, please follow other related articles on the PHP Chinese website!