Was soll ich tun, wenn Uniapp den Import nicht nutzen kann?

uniapp ist ein terminalübergreifendes Framework, mit dem Entwickler mithilfe der Vue-Syntax schnell mehrere Terminals wie kleine Programme, H5-Webseiten und APPs entwickeln können. Manchmal stoßen wir jedoch auf das Problem, dass Uniapp den Import nicht verwenden kann, was uns Unannehmlichkeiten bereitet. In diesem Artikel werden die Ursache und Lösung dieses Problems vorgestellt.

Zunächst müssen wir ein Konzept klären: Uniapp ist ein Framework, das auf der Vue-Syntax basiert, aber kein vollständiges Vue-Framework. Dies bedeutet, dass Uniapp zwar den Großteil der Vue-Syntax unterstützt, jedoch nicht die gesamte Vue-Syntax in Uniapp verwendet werden kann.

Bei der Entwicklung mit uniapp stoßen wir meist auf das Problem, dass wir externe Bibliotheken oder Komponenten nicht über Import importieren können. Wenn wir beispielsweise die Element-UI-UI-Komponentenbibliothek in einem Uniapp-Projekt verwenden möchten, verwenden wir Import, um die Komponente entsprechend der Art und Weise zu importieren, wie Vue verwendet wird:

import { Button } from 'element-ui'

export default {
  components: {
    Button
  }
}

Wenn wir es jedoch versuchen Um dies auszuführen, werden Sie beim Codieren feststellen, dass die Konsole den folgenden Fehler meldet:

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 {

Dieser Fehler bedeutet, dass „Import“ und „Export“ nur am Anfang der Datei geschrieben werden können. Dies liegt daran, dass sich die Kompilierungsmethode von Uniapp von der von Vue unterscheidet. Während des Kompilierungsprozesses kompiliert Uniapp die Komponenten in entsprechende kleine Programme, H5-Webseiten und andere verschiedene Teile. Daher führt die Verwendung von Import zum Importieren von Komponenten dazu, dass die Kompilierung fehlschlägt.

Also, wie kann man dieses Problem lösen? Es gibt mehrere Möglichkeiten:

1. Verwenden Sie require

require ist eine globale Funktion in Node.js, die zum Importieren aller Dokumenttypen verwendet werden kann . Wir können require verwenden, um die Komponente zu importieren und sie dann als Uniapp-Komponente zu registrieren:

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

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

In diesem Beispiel verwenden wir require, um die Button-Komponente zu importieren und sie dann als Uniapp-Komponente zu registrieren. Es ist zu beachten, dass in uniapp der Komponentenname eine durch Unterstriche getrennte Kleinbuchstabenzeichenfolge sein muss, daher verwenden wir „el-button“ als Komponentennamen.

2. Direkt auf der Seite verwenden

Wenn wir eine Komponente nur auf einer einzelnen Seite verwenden müssen, können wir die Komponente auch direkt auf der Seite vorstellen die Seite Und verwenden Sie es, ohne es in der Komponente zu registrieren:

<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 diesem Beispiel müssen wir die Button-Komponente nicht in der Komponente registrieren, wir können sie direkt auf der Seite verwenden. Es ist zu beachten, dass bei Verwendung externer Komponenten zuerst die der Komponente entsprechende CSS-Datei eingeführt werden muss, da sonst der Komponentenstil nicht angewendet wird.

3. Komponenten in Module packen

Wenn wir eine Komponente auf mehreren Seiten verwenden müssen, können wir die Komponente in ein Modul packen und dann Importieren Sie dieses Modul in andere Seiten. Zuerst müssen wir im vorhandenen Uniapp-Projekt einen neuen Ordner erstellen, um externe Komponenten zu speichern:

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

Unter dem Komponentenordner erstellen wir einen Ordner mit dem Namen my-component. Um externe Komponenten zu speichern, erstellen Sie einen Index. js-Datei in diesem Ordner, um die Komponente zu exportieren:

// components/my-component/index.js

import MyComponent from './MyComponent.vue'

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

In diesem Beispiel registrieren wir MyComponent als Komponente und verwenden die Installationsmethode, um sie als Modul zu exportieren. Dann müssen wir auf der Seite, die die Komponente verwenden muss, das Modul nur direkt im Skript-Tag einführen:

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

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

In diesem Beispiel verwenden wir Import, um das Komponentenmodul zu importieren und es als zu registrieren Bestandteile von uniapp. Es ist zu beachten, dass bei der Verwendung von Modulen der Komponentenname immer den Modulnamen verwenden sollte, beispielsweise „my-component“ anstelle von „MyComponent“.

Zusammenfassung

Die Verwendung von Import zum Importieren externer Komponenten kann nicht direkt in Uniapp verwendet werden, wir können jedoch require verwenden, es direkt auf der Seite verwenden oder Komponenten in Module packen dieses Problem. In der tatsächlichen Entwicklung sollten wir je nach Projektanforderungen unterschiedliche Methoden zur Verwendung von Komponenten wählen, um die Entwicklungseffizienz und die Wartbarkeit des Codes zu verbessern.

Das obige ist der detaillierte Inhalt vonWas soll ich tun, wenn Uniapp den Import nicht nutzen kann?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!