Es gibt vier Hauptm?glichkeiten, um externe Bibliotheken in VUE -Projekten zu verwenden: Erstens wird es installiert und modular über NPM eingeführt, geeignet für Bibliotheken, die ES -Module unterstützen, die auf Bedarf geladen werden k?nnen, um das Volumen zu verringern. Zweitens ist es als Vue-Plug-In registriert, das für Bibliotheken geeignet ist, die speziell für VUE wie Vue-Router entwickelt wurden. Drittens wird es über CDN eingeführt, was nicht empfohlen wird, aber für schnelle Tests geeignet ist. Viertens ist es Global Mount, das leicht zug?nglich zu mehreren Komponenten ist, aber das Risiko einer Umweltverschmutzung hat.

Die Verwendung externer Bibliotheken in VUE -Projekten unterscheidet sich tats?chlich von der Einführung von JS/CSS -Dateien auf normalen HTML -Seiten. Vue ist ein Framework zum Erstellen von Benutzeroberfl?chen. Es wird mehr empfohlen, Abh?ngigkeiten auf modulare Weise einzuführen, z. B. die Installation mit NPM und dann import sie. Es gibt jedoch bestimmte Situationen, in denen globale Reittiere, CDN -Einführung und andere Methoden erforderlich sind.

Hier sind einige gemeinsame und praktische Praktiken:

Installieren und vorstellen Sie es über das Modul

Dies ist der empfohlenste und standardm??igste Weg, der für die meisten Bibliotheken geeignet ist, die ES -Module unterstützen (wie Lodash, Axios, Tag.js usw.).

• Installieren Sie zuerst mit NPM oder Garn:

   NPM etwas Bibliothek installieren

• Stellen Sie es dann nach Bedarf in der Komponente ein:

   importieren

Wenn Sie nur eine bestimmte Funktion anstelle der gesamten Bibliothek einführen m?chten, k?nnen Sie nur die erforderlichen Teile importieren, wodurch auch das Verpackungsvolumen reduziert werden kann. Zum Beispiel bei Verwendung von Lodash:

 Importieren Sie Entlieben von 'Lodash/Dobounce'

Dieser Ansatz eignet sich für Bibliotheken, die Sie mit Ihrem Projekt verpacken und verwalten m?chten.

Registrieren Sie sich als Plugin oder mischen Sie die Komponente

Einige Bibliotheken sind Plug-Ins speziell für VUE ausgelegt, z. B. Vue Router, Vuex, Veevalidat usw. Sie bieten normalerweise eine .install() -Methode, die über app.use() registriert werden kann.

Zum Beispiel verwenden Sie Vue Router:

 Import {Createrouter, CreatewebHistory} aus 'Vue-Router' '
const router = createrouter ({{
  Geschichte: Createwebhistory (),
  Routen: [...]
})
const App = createApp (App)
app.use (Router)

Wenn Sie selbst eine Toolbibliothek in Verbindung bringen, k?nnen Sie sie auch als Plug-in-Formular schreiben und in mehreren Komponenten wiederverwenden.

Direkte Einführung mit CDN (nicht empfohlen, aber verfügbar)

Manchmal m?chten Sie einige Bibliotheken ohne NPM -Pakete schnell testen oder verwenden. Sie k?nnen das <script> -Tag in index.html direkt hinzufügen, um es einzuführen.

 <script src = "https://cdn.example.com/some-library.js"> </script>

Zu diesem Zeitpunkt k?nnen Sie über window.SomeLibrary darauf zugreifen. Es ist jedoch zu beachten, dass diese Methode nicht gut mit dem Modulpacker übereinstimmt, was für die Codemanagement- und Leistungsoptimierung nicht f?rderlich ist.

Wenn Sie dies tun müssen, denken Sie daran, den onMounted Haken in der Komponente zu verwenden, um zu überprüfen, ob dieses Objekt existiert, um zu vermeiden, dass er vor dem Laden aufgerufen wird.

Global Mount ist für mehrere Komponenten einfach zu bedienen

Wenn Sie m?chten, dass eine Bibliothek w?hrend des gesamten Projekts zug?nglich ist, k?nnen Sie sie am Prototyp montieren, wenn die VUE -Instanz erstellt wird (Vue 2) oder die Bereitstellung/Injektion (Vue 3).

Vue 2 Beispiel:

 importieren
Vue.Prototyp. $ Somelib = somelibrary

VUE 3 COMPOSION -API -Schreiben:

 const App = createApp (App)
app.config.globalproperties.somelib = somelibrary

Auf diese Weise k?nnen Sie this.someLib in jeder Komponente verwenden. Beachten Sie jedoch, dass diese Methode das Risiko einer globalen Umweltverschmutzung erh?ht, und es wird empfohlen, die Menge zu kontrollieren.

Grunds?tzlich diese Methoden. Verschiedene Szenarien k?nnen auf unterschiedliche Weise behandelt werden. Der Schlüssel ist, ob modulare Verpackungen erforderlich sind, ob globaler Zugriff erforderlich ist, ob er bei Bedarf usw. eingeführt werden muss. Wenn Sie die richtige Methode ausw?hlen, k?nnen Sie Ihre Projektstruktur klarer und leichter zu warten.

Das obige ist der detaillierte Inhalt vonWie benutze ich externe Bibliotheken mit Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!