Que dois-je faire si Uniapp ne peut pas utiliser l'importation ?

uniapp est un framework multi-terminal qui permet aux développeurs d'utiliser la syntaxe Vue pour développer rapidement plusieurs terminaux tels que des petits programmes, des pages Web H5 et des applications. Cependant, nous rencontrons parfois le problème qu'uniapp ne peut pas utiliser l'importation, ce qui nous apporte des désagréments. Cet article présentera la cause et la solution de ce problème.

Tout d'abord, nous devons clarifier un concept : uniapp est un framework développé basé sur la syntaxe Vue, mais ce n'est pas un framework Vue complet. Cela signifie que bien que Uniapp prenne en charge la plupart de la syntaxe de Vue, toute la syntaxe de Vue ne peut pas être utilisée dans Uniapp.

Lors du développement avec uniapp, nous rencontrons généralement le problème que les bibliothèques ou composants externes ne peuvent pas être importés à l'aide de l'importation. Par exemple, dans un projet uniapp, si nous voulons utiliser la bibliothèque de composants element-ui UI, nous utiliserons import pour importer le composant selon la manière dont Vue est utilisé :

import { Button } from 'element-ui'

export default {
  components: {
    Button
  }
}

Cependant, lorsque nous essayons d'exécuter ce code, nous constaterons que le contrôle L'erreur suivante a été signalée dans la station :

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 {

Cette erreur signifie que "import" et "export" ne peuvent être écrits qu'en haut du fichier. En effet, la méthode de compilation d'uniapp est différente de celle de Vue. Pendant le processus de compilation, uniapp compilera les composants dans les petits programmes correspondants, les pages Web H5 et d'autres parties différentes. Il ne peut pas compiler tous les composants dans un seul fichier comme Vue. Par conséquent, l’utilisation de import pour importer des composants entraînera l’échec de la compilation.

Alors, comment résoudre ce problème ? Il existe plusieurs manières :

1. Utiliser require

require est une fonction globale de Node.js qui peut être utilisée pour importer tous types de fichiers. Nous pouvons utiliser require pour importer le composant, puis l'enregistrer en tant que composant uniapp :

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

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

Dans cet exemple, nous utilisons require pour importer le composant Button, puis l'enregistrer en tant que composant uniapp. Il convient de noter que dans uniapp, le nom du composant doit être une chaîne minuscule séparée par des traits de soulignement, nous utilisons donc « el-button » comme nom du composant.

2. Utiliser directement sur la page

Si nous n'avons besoin d'utiliser qu'un certain composant dans une seule page, nous pouvons également introduire le composant directement sur la page et l'utiliser sans l'enregistrer dans le composant :

<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>

Dans ce Par exemple, nous n'avons pas besoin d'enregistrer le composant Button dans le composant, utilisez-le simplement directement sur la page. Il est à noter que lors de l'utilisation de composants externes, le fichier CSS correspondant au composant doit être introduit en premier, sinon le style du composant ne sera pas appliqué.

3. Emballer les composants dans des modules

Si nous devons utiliser un composant sur plusieurs pages, nous pouvons empaqueter le composant dans un module, puis importer le module dans d'autres pages. Tout d'abord, nous devons créer un nouveau dossier dans le projet uniapp existant pour stocker les composants externes :

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

Sous le dossier des composants, nous créons un dossier nommé my-component pour stocker les composants externes. Créez un fichier index.js dans ce dossier pour. exportez le composant :

// components/my-component/index.js

import MyComponent from './MyComponent.vue'

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

Dans cet exemple, nous enregistrons MyComponent en tant que composant et l'exportons en tant que module en utilisant la méthode d'installation. Ensuite, dans la page qui doit utiliser le composant, il suffit d'introduire le module directement dans la balise script :

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

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

Dans cet exemple, nous utilisons import pour importer le module du composant et l'enregistrer en tant que composant d'uniapp. Il convient de noter que lors de l'utilisation de modules, le nom du composant doit toujours utiliser le nom du module, par exemple, utiliser « mon-composant » au lieu de « Moncomposant ».

Résumé

L'utilisation de l'importation pour importer des composants externes ne peut pas être utilisée directement dans uniapp, mais nous pouvons résoudre ce problème en utilisant require, en l'utilisant directement sur la page ou en regroupant les composants dans des modules. Dans le développement réel, nous devons choisir différentes méthodes pour utiliser les composants en fonction des besoins du projet afin d'améliorer l'efficacité du développement et la maintenabilité du code.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!