Home Web Front-end uni-app How to import js in main.js in uniapp

How to import js in main.js in uniapp

Apr 27, 2023 am 09:06 AM

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";
Copy after login

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;
Copy after login

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>
Copy after login

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

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

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!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)