Wie uni-app auf NPM-Bibliotheken von Drittanbietern verweist

Die Methode für die Uni-App zum Verweisen auf die npm-Bibliothek eines Drittanbieters: Laden Sie zuerst die Bibliothek eines Drittanbieters herunter, erstellen Sie dann das Projekt [uni-app] und verwenden Sie schließlich den Code eines Drittanbieters ist [import * als Echarts aus ' Echarts'].

Die Betriebsumgebung dieses Tutorials: Windows7-System, Uni-App2.5.1-Version. Diese Methode ist für alle Computermarken geeignet.

Empfohlen (kostenlos): Uni-App-Entwicklungs-Tutorial

So referenzieren Sie die npm-Drittanbieterbibliothek in Uni-App:

1. Laden Sie die Drittanbieterbibliothek herunter

Uni-App verwendet einen Teil des Codes von mpvue , daher verwendet unsere Echarts-Bibliothek mpvue-echarts, die auch die mpvue-Version verwendet, und muss auf Baidus Echarts verweisen.

Der Downloadvorgang läuft wie folgt ab:

• Erstellen Sie einen leeren Ordner wie: test-echarts.

• Geben Sie test-echarts ein, um das Befehlszeilentool zu öffnen, führen Sie npm init aus und drücken Sie vollständig die Eingabetaste.

• Laden Sie die Drittanbieter-Bibliothek herunter: npm install echarts mpvue-echarts --save.

• Enter node_modules 目录，里面的三个目录：echarts、mpvue-echats 、zrender ist die Drittanbieter-Bibliothek, die wir brauchen.

2. Erstellen Sie ein Uni-App-Projekt

Erstellen Sie eine neue Uni-App in HBuilderX und kopieren Sie die drei gerade heruntergeladenen Ordner in das Projektstammverzeichnis:

3. Die Verwendung von Bibliotheken von Drittanbietern in Uni-App

ist dasselbe wie allgemeine Vue-Projekte, die auf Bibliotheken von Drittanbietern verweisen, wie unten gezeigt, sodass wir Echarts und MPVUE-ECharts im Projekt verwenden können.

import * as echarts from 'echarts'  
import mpvueEcharts from 'mpvue-echarts'

Der Quellcode dieses Beispiels befindet sich im beigefügten Projekt. Hier sind einige Screenshots des Codes und der Effekte:

<template>  
    <div class="container">  
        <mpvue-echarts :echarts="echarts" :onInit="onInit" />  
    </div>  
</template>  
<script>  
    import * as echarts from &#39;echarts&#39;  
    import mpvueEcharts from &#39;mpvue-echarts&#39;  
    function initChart(canvas, width, height) {  
        ......  
    }  
    export default {  
        data() {  
            return {  
                echarts,  
                onInit: initChart  
            }  
        },  
        components: {  
            mpvueEcharts  
        }  
    }  
</script>  
<style>  
    .container {  
        flex: 1;  
    }  
</style>

Das obige ist der detaillierte Inhalt vonWie uni-app auf NPM-Bibliotheken von Drittanbietern verweist. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!