Integrationspraxis des Vue+Element-Hintergrundverwaltungsframeworks

Ein neu entwickeltes Hintergrundverwaltungssystem. In Bezug auf das Framework sollten Führungskräfte die AdminLTE-Vorlage verwenden. Das ist eigentlich ganz einfach. Importieren Sie einfach die erforderlichen Stile und JS-Dateien. Ich werde hier nicht ins Detail gehen. Sie können sich auf der offiziellen Website informieren: https://adminlte.io/

Das Wirkungsdiagramm sieht wie folgt aus:

Die AdminLTE-Vorlage ist sehr praktisch. Jeder Interessierte kann es selbst herausfinden. Ich habe diese Vorlage lediglich in das neue System eingebettet und mich nicht näher damit befasst.

Damit ist AdminLTE abgeschlossen. Lassen Sie uns über das heutige Thema sprechen, das Hintergrundverwaltungsframework von Vue+ElementUI.

Vue+ElementUI-Hintergrundverwaltungsframework

Zunächst müssen wir verstehen, was Vue ist. Offizielle Vue-Website: https://cn.vuejs.org/

Erklärung zu Vue auf der offiziellen Website von Vue:

Vue (ausgesprochen /vjuː/, ähnlich wie „view“) ist ein fortschrittliches Framework zum Erstellen von Benutzeroberflächen. Anders als andere große Frameworks ist Vue darauf ausgelegt, Schicht für Schicht von unten nach oben angewendet zu werden. Die Kernbibliothek von Vue konzentriert sich nur auf die Ansichtsebene. Dies erleichtert nicht nur den Einstieg, sondern lässt sich auch problemlos in Bibliotheken von Drittanbietern oder vorhandene Projekte integrieren. Andererseits ist Vue in Kombination mit einer modernen Toolchain und verschiedenen unterstützenden Bibliotheken durchaus in der Lage, komplexe Single-Page-Anwendungen auszuführen.

Was ist also ElementUI?

Ich habe gehört, dass es sich um eine Reihe von UI-Komponenten handelt, die von Ele.me entwickelt wurden. Über die Details bin ich mir nicht sicher. Dies ist die offizielle chinesische Website von ElementUI: https://element.eleme.cn/

In der offiziellen Dokumentation gibt ElementUI seine Designprinzipien an:

1. Konsistenz

Im Einklang mit dem wirklichen Leben: Bleiben Sie den Prozessen und der Logik des wirklichen Lebens treu und verwenden Sie die Sprache und Konzepte, an die die Benutzer gewöhnt sind.

Konsistenz der Benutzeroberfläche: Alle Elemente und Strukturen sollten konsistent sein, z. B. Designstil, Symbole und Text, Position der Elemente usw.

2. Feedback

Kontrollfeedback: Ermöglichen Sie Benutzern eine klare Wahrnehmung ihrer Vorgänge durch den Schnittstellenstil und interaktive Effekte.

Seitenfeedback: Nach der Operation wird der aktuelle Status durch die Änderungen der Seitenelemente übersichtlich dargestellt.

3. Effizienz

Vereinfachen Sie den Prozess: Gestalten Sie einen einfachen und intuitiven Bedienungsprozess

Klarheit: Die Sprache ist klar und die Bedeutung ist eindeutig, sodass Benutzer schnell verstehen und Entscheidungen treffen können

Helfen Sie Benutzern bei der Identifizierung: Die Benutzeroberfläche ist einfach und unkompliziert, sodass Benutzer schnell unterscheiden können, anstatt sich erinnern zu müssen, wodurch die Gedächtnisbelastung des Benutzers verringert wird.

4. Kontrollierbarkeit

Entscheidungsfindung durch den Benutzer: Es kann den Benutzern je nach Szenario Betriebsvorschläge oder Sicherheitstipps geben, aber keine Entscheidungen im Namen der Benutzer treffen.

Kontrollierbare Ergebnisse: Benutzer können Vorgänge frei ausführen, einschließlich Rückgängigmachen, Zurücksetzen und Beenden des aktuellen Vorgangs.

Diese werden alle auf der offiziellen Website vorgestellt.

vue-element-admin ist eine Backend-Frontend-Lösung

Da dies auf Basis von Vue+ElementUI entwickelt wurde, sind noch einige Front-End-Vorbereitungen von Vue erforderlich. Sie können dies im vorherigen Aufsatz nachlesen, klicken Sie hier

Offizielles chinesisches Hilfedokument https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/

vue-element-admin ist eine Backend-Frontend-Lösung, die auf Vue und Element-UI basiert. Es verwendet den neuesten Front-End-Technologie-Stack, verfügt über integrierte i18-Internationalisierungslösungen, dynamisches Routing, Berechtigungsüberprüfung, verfeinert typische Geschäftsmodelle und bietet umfangreiche Funktionskomponenten. Es kann Ihnen dabei helfen, schnell Mid-End- und Back-End-Produktprototypen auf Unternehmensebene zu erstellen.

Dieses Projekt ist als Backend-Integrationslösung positioniert und eignet sich nicht als Basisvorlage für die sekundäre Entwicklung. Da dieses Projekt viele Funktionen integriert, die Sie möglicherweise nicht verwenden, entsteht eine Menge Code-Redundanz. Sollte dieser Aspekt bei Ihrem Projekt nicht im Vordergrund stehen, können Sie auch direkt darauf aufbauend eine Sekundärentwicklung durchführen.

Installieren Sie Git und laden Sie die Demo herunter

Gehen Sie zu dieser Adresse https://git-scm.com/download/win, um Git herunterzuladen und zu installieren

Nach dem Herunterladen von Git können Sie den Code von Git abrufen

Git-Klon https://github.com/PanJiaChen/vue-element-admin.git

Alternativ können Sie das komprimierte Paket direkt von Git herunterladen https://github.com/PanJiaChen/vue-element-admin.git

Nach dem Download sieht die Verzeichnisstruktur des Projekts folgendermaßen aus

Installationsabhängigkeiten:

npm installieren

Es wird empfohlen, cnpm nicht für die Installation zu verwenden, da es zu verschiedenen seltsamen Fehlern kommen kann. Sie können das Problem der langsamen npm-Downloadgeschwindigkeit folgendermaßen lösen:

npm install --registry=https://registry.npm.taobao.org

Stellen Sie zunächst sicher, dass die Node.js-Umgebung auf Ihrem Computer installiert ist. Sie können es von der offiziellen Website herunterladen.

Lokale Entwicklung, starten Sie das Projekt

vue cli 2 ist npm run dev , cli 3 ist npm run serve

Wenn die vorherigen Schritte korrekt sind, wird die folgende Schnittstelle angezeigt:

Melden Sie sich an und Sie können die folgende Schnittstelle sehen: Diese Schnittstelle ist ganz schön

Routing und Konfiguration linkes Menü

Was ist Routing? Sie können sich auf die offizielle Erklärung beziehen: https://router.vuejs.org/zh/guide/

Durch Routing können wir über unterschiedliche URLs auf unterschiedliche Inhalte zugreifen. Diese URL können wir selbst festlegen. Im Projekt gibt es keinen solchen Ordner. Diese Funktion ist Routing.

Das Wesentliche beim Routing ist der Hash-Wert!

Die Routing-Einstellungen in Vue sind in vier Schritte unterteilt:

Definieren: Routing-Komponenten definieren

Konfiguration: Routing konfigurieren

Implementierung: Instanziieren von Routen

Montieren: Montieren Sie die Route

Mit Vue.js + Vue Router ist es sehr einfach, eine Einzelseitenanwendung zu erstellen. Mit Vue.js können wir bereits Anwendungen zusammenstellen, indem wir Komponenten kombinieren. Wenn Sie Vue Router hinzufügen, müssen wir nur Komponenten Routen zuordnen und Vue Router dann mitteilen, wo sie gerendert werden sollen.

Die Route befindet sich in src->router->index.js, und es gibt auch einen Ordner „views“, in dem diese Seiten natürlich abgelegt werden~

Zunächst müssen wir verstehen, welche Konfigurationselemente bei der Konfiguration des Routings in diesem Projekt bereitgestellt werden

//Wenn auf true gesetzt, wird die Route nicht in der Seitenleiste angezeigt, z. B. 401, Login usw. oder auf einigen Bearbeitungsseiten wie /edit/1
versteckt: true // (Standard: false)

//Wenn noRedirect gesetzt ist, kann die Route in der Breadcrumb-Navigationsweiterleitung nicht angeklickt werden: 'noRedirect'

//Wenn die Anzahl der unter einer Route deklarierten untergeordneten Elemente größer als 1 ist, wird automatisch ein verschachtelter Modus aktiviert (z. B. die Komponentenseite). //Wenn nur eine untergeordnete Route vorhanden ist, wird diese untergeordnete Route in der Seitenleiste als Stammroute angezeigt (z. B. die Startseite). //Wenn Sie Ihre Stammroute unabhängig von der Anzahl der unter der Route deklarierten untergeordneten Elemente anzeigen möchten //Sie können alwaysShow: true festlegen, sodass die zuvor definierten Regeln ignoriert werden und immer die Stammroute angezeigt wird. alwaysShow: true

Name: 'Routername' // Legen Sie den Namen des Routers fest. Achten Sie darauf, ihn einzugeben, da es sonst bei der Verwendung von <keep-alive> zu verschiedenen Problemen kommt. Meta: {
  Rollen: ['Administrator', 'Editor'] //Legen Sie die Zugriffsberechtigungen für diese Route fest. Unterstützung mehrerer Berechtigungen. Überlagerungstitel: 'Titel' //Legen Sie den Namen dieser Route fest, der in der Seitenleiste und in den Breadcrumbs angezeigt wird. Symbol: 'SVG-Name' //Legen Sie das Symbol dieser Route fest. noCache: true //Wenn auf 'true' gesetzt, wird es nicht von <keep-alive> zwischengespeichert (Standard: 'false').
  breadcrumb: false // Wenn auf false gesetzt, wird es nicht im Breadcrumb angezeigt}

Daher müssen wir lediglich an der entsprechenden Stelle in der Route unsere eigenen Menüpunkte hinzufügen.

{
    Pfad: '/bingle',
    Komponente: Layout,
    Umleitung: '/bingle/index',
    Name: 'bingle',
    Meta: {
      Titel: 'BingleTestMainMenu',
      Symbol: „Beispiel“
    },
    Kinder: [
      {
        Pfad: 'bingle',
        Komponente: () => import('@/views/dashboard/index'),
        Name: 'bingle',
        Meta: {Titel: „BingleSubmenu1“, Symbol: „Anleitung“, noCache: true, Affix: true}
      },
      {
        Pfad: 'bingle1',
        Komponente: () => import('@/views/dashboard/index'),
        Name: 'bingle2',
        Meta: {Titel: „BingleSubmenu2“, Symbol: „Anleitung“, noCache: true, Affix: true}
      }
    ]
  },

Anschließend können Sie die von Ihnen hinzugefügten Menüpunkte in der Menüleiste sehen.

Dies ist das Ende dieses Artikels über die Integrationspraxis des Hintergrundverwaltungsframeworks von Vue+Element. Weitere relevante Inhalte zum Hintergrundverwaltungsframework von Vue Element finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!