What should I do if uniapp cannot use import?

Uniapp is a cross-terminal framework that allows developers to use Vue syntax to quickly develop multiple terminals such as small programs, H5 web pages, and APPs. However, sometimes we encounter the problem that uniapp cannot use import, which brings us inconvenience. This article will introduce the cause and solution of this problem.

First of all, we need to clarify a concept: uniapp is a framework developed based on Vue syntax, but it is not a complete Vue framework. This means that although uniapp supports most of Vue's syntax, not all Vue syntax can be used in uniapp.

When developing using uniapp, we usually encounter the problem that external libraries or components cannot be imported using import. For example, if we want to use the element-ui UI component library in a uniapp project, we will use import to import the component according to the way Vue is used:

import { Button } from 'element-ui'

export default {
  components: {
    Button
  }
}

However, when we try to run this code , you will find that the console reports the following error:

Module build failed: Error: 'import' and 'export' may only appear at the top level (1:0)
You may need an appropriate loader to handle this file type.
| import { Button } from 'element-ui'
| 
| export default {

This error means that "import" and "export" can only be written at the top of the file. This is because the compilation method of uniapp is different from that of Vue. During the compilation process, uniapp will compile the components into different parts such as corresponding small programs and H5 web pages. It cannot compile all components into one file like Vue. . Therefore, using import to import components will cause compilation to fail.

So, how to solve this problem? There are several ways:

1. Use require

require is a global function in Node.js that can be used to import all types of files. We can use require to import the component, and then register it as a uniapp component:

const { Button } = require('element-ui')

export default {
  components: {
    'el-button': Button
  }
}

In this example, we use require to import the Button component, and then register it as a uniapp component. It should be noted that in uniapp, the component name must be a lowercase string separated by underscores, so we use 'el-button' as the component name.

2. Use directly on the page

If we only need to use a component in a single page, we can also introduce the component directly on the page and use it. No need to Register in the component:

<script>
  import 'element-ui/lib/theme-chalk/button.css'

  export default {
    methods: {
      handleClick () {
        this.$message('Hello world')
      }
    }
  }
</script>

<template>
  <el-button @click="handleClick">Click Me</el-button>
</template>

In this example, we do not need to register the Button component in the component, we can use it directly on the page. It should be noted that when using external components, the CSS file corresponding to the component needs to be introduced first, otherwise the component style will not be applied.

3. Package components into modules

If we need to use a component in multiple pages, we can package the component into a module and then import it in other pages. module. First, we need to create a new folder in the existing uniapp project to store external components:

├── components/
│   ├── my-component/
│   ├── ...
│   └── index.js
├── pages/
└── uni.scss

Under the components folder, we create a folder named my-component to store For external components, create an index.js file in this folder to export the component:

// components/my-component/index.js

import MyComponent from './MyComponent.vue'

export default {
  install (Vue) {
    Vue.component('my-component', MyComponent)
  }
}

In this example, we register MyComponent as a component and export it as a module using the install method. Then, in the page that needs to use the component, we only need to directly introduce the module in the script tag:

<script>
  import MyComponent from '@/components/my-component'

  export default {
    components: {
      MyComponent
    }
  }
</script>

In this example, we use import to import the component module and register it as uniapp components. It should be noted that when using modules, the component name should always use the module name, for example, use 'my-component' instead of 'MyComponent'.

Summary

Using import to import external components cannot be used directly in uniapp, but we can solve this problem by using require, using it directly on the page, or packaging components into modules. In actual development, we should choose different methods to use components according to project needs to improve development efficiency and code maintainability.

The above is the detailed content of What should I do if uniapp cannot use import?. For more information, please follow other related articles on the PHP Chinese website!