So verwenden Sie vue3 zum Erstellen einer Materialbibliothek

Warum brauchen wir eine Materialbibliothek?

Wir haben viele Landingpages geschrieben. Abgesehen von einigen Hintergrundbildern und -farben ist das Hauptlayout jeder Anmeldeseite nahezu gleich und weist nur wenige Typen auf. Wenn es einen Ort gibt, der mir bei der Verwaltung des Codes der Anmeldeseite helfen kann, kann ich beim nächsten Schreiben der Anmeldung direkt die Schnittstelle generieren und die Logik anpassen.

Sie können eine login.txt-Datei erstellen, um Ihre Anmeldeseite zu speichern, aber wenn die Anzahl der Codeausschnitte, die Sie speichern möchten, zunimmt, wird es schwierig, die spezifische Präsentationsform des Codeausschnitts anhand des Dateinamens zu erkennen. Dies bringt uns zu dem Thema, das wir besprechen möchten: wie man wiederverwendbare Codeausschnitte durch den Aufbau einer Materialbibliothek verwaltet.

Aus welchem ​​Material besteht es?

Materialien sind wiederverwendbare Code-Schnipsel

Apropos Wiederverwendung: Sie fragen sich vielleicht, warum man es nicht eine Komponente nennt? Weil sich Materialien grundsätzlich von Komponenten unterscheiden. Materialien sind nur eine Codezeichenfolge und haben keine Eigenschaften wie Requisiten, Ereignisse und Slots.

Materialien können je nach Partikelgröße in verschiedene Typen unterteilt werden:

• Materialien auf Komponentenebene
• Materialien auf Blockebene
• Materialien auf Seitenebene

Art des Materials

Nehmen Sie als Beispiel einen Knopf. Beispielsweise beträgt der Schaltflächenradius der UI-Bibliothek 6 Pixel, aber die vom Designer benötigte Schaltfläche hat keinen Radius. Wir können einen Codeausschnitt wie diesen vervollständigen:

<!-- Materialien auf Komponentenebene -->
<el-button style="border-radius:0"></el-button>

Speichern Sie diesen Codeausschnitt als Material auf Komponentenebene, damit Sie schnell auf diesen Codeausschnitt zugreifen können, wenn Sie eine Schaltfläche ohne abgerundete Ecken verwenden möchten.

Sie fragen sich vielleicht: Ist das nicht einfach das Hinzufügen eines Attributs? Warum muss ich es in ein Material umwandeln? Ich kann es einfach direkt schreiben. In diesem Beispiel möchte ich Ihnen auf einfachste Weise erklären, was Materialien auf Komponentenebene sind. Wenn Sie nur eine Rundung ändern, müssen Sie sie nicht unbedingt als Material speichern.

Beim Entwickeln eines Backend-Verwaltungssystems werden die meisten Listen und Tabellen im Allgemeinen mit Seitennummerierung angezeigt. Einen Codeausschnitt, der eine Tabelle und eine Seitennummerierung kombiniert, bezeichnen wir als Block-Level-Material, zum Beispiel:

<!-- Materialien auf Blockebene-->
<el-Tabelle />
<el-pagination />

Wenn Ihre Anmelde- und Registrierungsseiten in verschiedenen Projekten denselben Stil haben, können Sie auch die gesamte Seite als Material auf Seitenebene verwenden, zum Beispiel:

<!-- Material auf Seitenebene -->
<el-input placeholder="Bitte geben Sie Ihren Benutzernamen ein"></el-input>
<el-input placeholder="Bitte geben Sie Ihr Passwort ein"></el-input>
<el-button>Anmelden</el-button>
<a href="#" rel="external nofollow" >Passwort vergessen?</a>

fuep, eine auf vue3 basierende Materialbibliothek

fuep ist ein Tool, das Ihnen bei der Verwaltung von Code-Snippets hilft. Am Ende dieses Artikels finden Sie einen Link zur Online-Testversion.

Wenn Sie Feibing verwendet haben, werden Sie feststellen, dass das Konzept der Materialien fast dasselbe ist wie bei Feibing. Der Unterschied zu Feibing besteht darin, dass der Materialträger in fuep keine Datei ist, sondern ein visuelles Layout-Tool. Die Verwendung visueller Layout-Tools als Träger von Materialien bringt einige Nachteile mit sich: Sie ist aufdringlich und an Vue und bestimmte UI-Bibliotheken gebunden. Derzeit können Sie nur Materialbibliotheken basierend auf Element Plus und Vant3 erstellen. Wenn Sie jedoch Element Plus- oder Vant-Benutzer sind, bietet Ihnen die Verwendung des visuellen Layouts zum Erstellen von Materialien viele Vorteile:

1. Echtzeitvorschau, um sicherzustellen, dass die Anzeigewirkung des Materials den Erwartungen entspricht
2. Das Layout und die Details können leicht geändert werden
3. Materialien können frei kombiniert werden
4. Schnelles Layout
   

Unten zeige ich eines der Materialien. Die folgenden Komponenten ordnet man im visuellen Layout so an:

Der generierte Code ist dieser;

    <el-row Typ="flex" rechtfertigen="start" ausrichten="Mitte">
        <el-col :span="12">
            Steigern Sie die Produktivität Ihrer Ingenieure
            Fuep konzentriert sich auf die Verbesserung der Effizienz von Ingenieuren und verwendet visuelles Layout, um schnell und einfach zu wartenden Code zu generieren. Im Vergleich zu herkömmlichen Visualisierungstools müssen Zeilen und Spalten nicht ineinander verschachtelt werden.
            <el-row Typ="flex" rechtfertigen="start" ausrichten="Mitte">
                <el-button type="primary" class="ml-4 mt-4 px-8">Live-Demo</el-button>
                <el-button class="ml-4 mt-4 px-8">Erste Schritte</el-button>
            </el-row>
        </el-col>
        <el-col :span="12">
            <el-image src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" :fit="Abdecken" Klasse="" fit="Verkleinern"></el-image>
        </el-col>
    </el-row>

Die durch den Code gerenderte Schnittstelle ist wie folgt:

Auf der Grundlage dieses Materials können Sie einige Änderungen am Layout oder an Details vornehmen und es als neues, Ihnen gehörendes Material speichern.

Wenn Sie nicht wissen, wie Sie anfangen sollen, können Sie unten links auf die Anleitung oder Einführung klicken, um zu verstehen, wie fuep funktioniert.

fuep Online-Erlebnis

Oben finden Sie Einzelheiten zur Verwendung von vue3 zum Erstellen einer Materialbibliothek. Weitere Informationen zum Erstellen einer Materialbibliothek mit vue finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!