Vue3 (III) Website Homepage Layout Entwicklung

Vue3 (III) Website Homepage Layout Entwicklung

1. Einleitung

Im vorherigen Artikel wurde Ant Design Vue3 integriert. Es wurde erwähnt, dass nach der Integration von Ant Design Vue, wie bei Element Ui, weiterhin Komponenten verwendet und diese dann kopiert und eingefügt werden.

2. Tatsächliche Fälle

Lassen Sie uns zunächst ein Layout erstellen, das wir layout nennen, wie unten gezeigt:

Ändern Sie es nicht auf der Home . Warum? Jede Seite hat eine Kopf- und eine Fußzeile, die schwieriger zu schreiben sind. Die sich dynamisch ändernden Teile können auf Home verwaltet werden.

1. App.vue ändern

Ignorieren Sie das Routing-Problem vorerst und ändern Sie es in App.vue . Der Beispielcode lautet wie folgt:

html:

<Vorlage>
  <a-Layout>
    <a-layout-header Klasse="Header">
      <div Klasse="Logo" />
      <a-Menü
          Thema="dunkel"
          Modus="horizontal"
          v-Modell: ausgewählteSchlüssel="ausgewählteSchlüssel1"
          :style="{ Zeilenhöhe: '64px' }"
      >
        <a-menu-item key="1">Navigation 1</a-menu-item>
        <a-menu-item key="2">Navigation 2</a-menu-item>
        <a-menu-item key="3">Navigation 3</a-menu-item>
      </a-Menü>
    </a-layout-header>
    <a-Layout>
      <a-layout-sider width="200" style="Hintergrund: #fff">
        <a-Menü
            Modus="inline"
            v-Modell:selectedKeys="selectedKeys2"
            v-Modell:openKeys="openKeys"
            :Stil="{ Höhe: '100%', Rahmen rechts: 0 }"
        >
          <a-sub-menu key="sub1">
            <Vorlage #Titel>
              <span>
                <Benutzer-umrissen />
                Unternavigation 1
              </span>
            </Vorlage>
            <a-menu-item key="1">Option1</a-menu-item>
            <a-menu-item key="2">Option2</a-menu-item>
            <a-menu-item key="3">Option3</a-menu-item>
            <a-menu-item key="4">Option4</a-menu-item>
          </a-Untermenü>
          <a-sub-menu key="sub2">
            <Vorlage #Titel>
              <span>
                <laptop-umrissen />
                Unternavigation 2
              </span>
            </Vorlage>
            <a-menu-item key="5">Option 5</a-menu-item>
            <a-menu-item key="6">Option6</a-menu-item>
            <a-menu-item key="7">Option 7</a-menu-item>
            <a-menu-item key="8">Option8</a-menu-item>
          </a-Untermenü>
          <a-sub-menu key="sub3">
            <Vorlage #Titel>
              <span>
                <Benachrichtigung-umrissen />
                Unternavigation 3
              </span>
            </Vorlage>
            <a-menu-item key="9">Option9</a-menu-item>
            <a-menu-item key="10">Option10</a-menu-item>
            <a-menu-item key="11">Option11</a-menu-item>
            <a-menu-item key="12">Option12</a-menu-item>
          </a-Untermenü>
        </a-Menü>
      </a-layout-sider>
      <a-layout style="padding: 0 24px 24px">
        <a-breadcrumb style="margin: 16px 0">
          <a-breadcrumb-item>Startseite</a-breadcrumb-item>
          <a-breadcrumb-item>Liste</a-breadcrumb-item>
          <a-breadcrumb-item>App</a-breadcrumb-item>
        </a-breadcrumb>
        <a-Layout-Inhalt
            :style="{ Hintergrund: '#fff', Polsterung: '24px', Rand: 0, min. Höhe: '280px' }"
        >
          Inhalt
        </a-layout-inhalt>
      </a-layout>
    </a-layout>
    <a-layout-footer style="text-align: center">
      Ant Design ©2018 Erstellt von Ant UED
    </a-layout-footer>
  </a-layout>
</Vorlage>

<Stil>
#Komponenten-Layout-Demo-Oberseite-2 .logo {
  schweben: links;
  Breite: 120px;
  Höhe: 31px;
  Rand: 16px 24px 16px 0;
  Hintergrund: rgba(255, 255, 255, 0,3);
}

.ant-row-rtl #Komponenten-Layout-Demo-Oberseite-2 .logo {
  schweben: rechts;
  Rand: 16px 0 16px 24px;
}

.site-layout-hintergrund {
  Hintergrund: #fff;
}
</Stil>

Der Effekt ist wie unten dargestellt:

2. Passen Sie das Layout an

Auf den ersten Blick wirken Stil und Layout chaotisch. Ich habe das Layout angepasst und den Code wie folgt geändert:

html:

<Vorlage>
  <a-Layout>
    <a-layout-header Klasse="Header">
      <div Klasse="Logo" />
      <a-Menü
          Thema="dunkel"
          Modus="horizontal"
          v-Modell: ausgewählteSchlüssel="ausgewählteSchlüssel1"
          :style="{ Zeilenhöhe: '64px' }"
      >
        <a-menu-item key="1">Navigation 1</a-menu-item>
        <a-menu-item key="2">Navigation 2</a-menu-item>
        <a-menu-item key="3">Navigation 3</a-menu-item>
      </a-Menü>
    </a-layout-header>
    <a-Layout>
      <a-layout-sider width="200" style="Hintergrund: #fff">
        <a-Menü
            Modus="inline"
            v-Modell:selectedKeys="selectedKeys2"
            v-Modell:openKeys="openKeys"
            :Stil="{ Höhe: '100%', Rahmen rechts: 0 }"
        >
          <a-sub-menu key="sub1">
            <Vorlage #Titel>
                <span>
                  <Benutzer-umrissen />
                  Unternavigation 1
                </span>
            </Vorlage>
            <a-menu-item key="1">Option1</a-menu-item>
            <a-menu-item key="2">Option2</a-menu-item>
            <a-menu-item key="3">Option3</a-menu-item>
            <a-menu-item key="4">Option4</a-menu-item>
          </a-Untermenü>
          <a-sub-menu key="sub2">
            <Vorlage #Titel>
                <span>
                  <laptop-umrissen />
                  Unternavigation 2
                </span>
            </Vorlage>
            <a-menu-item key="5">Option 5</a-menu-item>
            <a-menu-item key="6">Option6</a-menu-item>
            <a-menu-item key="7">Option 7</a-menu-item>
            <a-menu-item key="8">Option8</a-menu-item>
          </a-Untermenü>
          <a-sub-menu key="sub3">
            <Vorlage #Titel>
                <span>
                  <Benachrichtigung-umrissen />
                  Unternavigation 3
                </span>
            </Vorlage>
            <a-menu-item key="9">Option9</a-menu-item>
            <a-menu-item key="10">Option10</a-menu-item>
            <a-menu-item key="11">Option11</a-menu-item>
            <a-menu-item key="12">Option12</a-menu-item>
          </a-Untermenü>
        </a-Menü>
      </a-layout-sider>
      <a-Layout-Inhalt
          :style="{ Hintergrund: '#fff', Polsterung: '24px', Rand: 0, min. Höhe: '280px' }"
      >
        Inhalt
      </a-layout-inhalt>
    </a-layout>
    <a-layout-footer style="text-align: center">
      Softwaretester©2021 Erstellt von Liuge</a-layout-footer>
  </a-layout>
</Vorlage>

<Stil>
#Komponenten-Layout-Demo-Oberseite-2 .logo {
  schweben: links;
  Breite: 120px;
  Höhe: 31px;
  Rand: 16px 24px 16px 0;
  Hintergrund: rgba(255, 255, 255, 0,3);
}

.ant-row-rtl #Komponenten-Layout-Demo-Oberseite-2 .logo {
  schweben: rechts;
  Rand: 16px 0 16px 24px;
}

.site-layout-hintergrund {
  Hintergrund: #fff;
}
</Stil>

Die veränderte Wirkung ist wie folgt:

3. Ändern Sie die Route, um den Sprung zu erreichen

Wie bereits erwähnt, müssen Sie nur den dynamischen Teil ändern, um die Route festzulegen und den Sprungzugriff auf den dynamischen Teil zu realisieren. Die Kopf- und Fußzeile sowie das sekundäre Menü ändern sich hier nicht. Nur content muss geändert werden.

Ändern Sie Home.vue. Der Beispielcode lautet wie folgt:

javascript - Argumente:

<Vorlage>
  <a-Layout>
    <a-layout-sider width="200" style="Hintergrund: #fff">
      <a-Menü
          Modus="inline"
          v-Modell:selectedKeys="selectedKeys2"
          v-Modell:openKeys="openKeys"
          :Stil="{ Höhe: '100%', Rahmen rechts: 0 }"
      >
        <a-sub-menu key="sub1">
          <Vorlage #Titel>
                <span>
                  <Benutzer-umrissen />
                  Unternavigation 1
                </span>
          </Vorlage>
          <a-menu-item key="1">Option1</a-menu-item>
          <a-menu-item key="2">Option2</a-menu-item>
          <a-menu-item key="3">Option3</a-menu-item>
          <a-menu-item key="4">Option4</a-menu-item>
        </a-Untermenü>
        <a-sub-menu key="sub2">
          <Vorlage #Titel>
                <span>
                  <laptop-umrissen />
                  Unternavigation 2
                </span>
          </Vorlage>
          <a-menu-item key="5">Option 5</a-menu-item>
          <a-menu-item key="6">Option6</a-menu-item>
          <a-menu-item key="7">Option 7</a-menu-item>
          <a-menu-item key="8">Option8</a-menu-item>
        </a-Untermenü>
        <a-sub-menu key="sub3">
          <Vorlage #Titel>
                <span>
                  <Benachrichtigung-umrissen />
                  Unternavigation 3
                </span>
          </Vorlage>
          <a-menu-item key="9">Option9</a-menu-item>
          <a-menu-item key="10">Option10</a-menu-item>
          <a-menu-item key="11">Option11</a-menu-item>
          <a-menu-item key="12">Option12</a-menu-item>
        </a-Untermenü>
      </a-Menü>
    </a-layout-sider>
    <a-Layout-Inhalt
        :style="{ Hintergrund: '#fff', Polsterung: '24px', Rand: 0, min. Höhe: '280px' }"
    >
      Inhalt
    </a-layout-inhalt>
  </a-layout>
</Vorlage>

<script lang="ts">
importiere { defineComponent } von „vue“;
importiere HelloWorld von '@/components/HelloWorld.vue'; // @ ist ein Alias ​​für /src

exportiere StandarddefiniereKomponente({
  Name: "Home",
  Komponenten:
    Hallo Welt,
  },
});
</Skript>

Ändern Sie App.vue, um Routensprünge zu implementieren: Der Beispielcode lautet wie folgt:

html:

<Vorlage>
  <a-Layout>
    <a-layout-header Klasse="Header">
      <div Klasse="Logo" />
      <a-Menü
          Thema="dunkel"
          Modus="horizontal"
          v-Modell: ausgewählteSchlüssel="ausgewählteSchlüssel1"
          :style="{ Zeilenhöhe: '64px' }"
      >
        <a-menu-item key="1">Navigation 1</a-menu-item>
        <a-menu-item key="2">Navigation 2</a-menu-item>
        <a-menu-item key="3">Navigation 3</a-menu-item>
      </a-Menü>
    </a-layout-header>
    <Router-Ansicht/>
    <a-layout-footer style="text-align: center">
      Softwaretester©2021 Erstellt von Liuge</a-layout-footer>
  </a-layout>
</Vorlage>

<Stil>
#Komponenten-Layout-Demo-Oberseite-2 .logo {
  schweben: links;
  Breite: 120px;
  Höhe: 31px;
  Rand: 16px 24px 16px 0;
  Hintergrund: rgba(255, 255, 255, 0,3);
}

.ant-row-rtl #Komponenten-Layout-Demo-Oberseite-2 .logo {
  schweben: rechts;
  Rand: 16px 0 16px 24px;
}

.site-layout-hintergrund {
  Hintergrund: #fff;
}
</Stil>

Der Fehler nach der Hot-Deployment-Kompilierung lautet wie folgt:

Aus dem Fehlerbericht wissen wir, dass die Verifizierungsregel einen Fehler meldet. Eine einfache Möglichkeit besteht darin, die nicht registrierte Komponente HelloWorld zu löschen. Die zweite Methode besteht darin, die Verifizierungsdateiregeln zu ändern und den folgenden Inhalt in eslintrc.js hinzuzufügen:

javascript - Argumente:

  Regeln:
    'keine Konsole': process.env.NODE_ENV === 'Produktion'? 'Warnung': 'aus',
    'no-debugger': process.env.NODE_ENV === 'Produktion'? 'warn': 'aus',
    „vue/keine unbenutzten Komponenten“: „aus“
  }

Wird diese automatische Kompilierung immer noch einen Fehler verursachen, wie unten gezeigt:

Es besteht kein Grund zur Sorge, wenn ein Fehler gemeldet wird. Keine Panik. Starten Sie den Dienst wie folgt neu:

Dieses Mal habe ich direkt auf die Seitenadresse zugegriffen und der Effekt war wie folgt:

Besuchen Sie dann die Infoseite, wie unten gezeigt:

3. Abschließend

Verwendung der Router-Ansicht

Entspricht einem Schnittstellenplatzhalter

Nutzung der Router-Anbindung an

Für Seitensprünge

Dies ist das Ende dieses Artikels über die Entwicklung des Homepage-Layouts von Vue3-Websites. Weitere relevante Inhalte zur Entwicklung des Homepage-Layouts Vue3 Websites finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:
  • Der gesamte Prozess der Realisierung der Website-Internationalisierung mit Vite2 und Vue3

<<:  Docker ändert die Konfigurationsinformationen eines nicht gestarteten Containers

>>:  Einige Fragen zu Hyperlinks

Artikel empfehlen

Automatisierte Schnittstellentests mit Postman

Inhaltsverzeichnis Hintergrundbeschreibung Erstel...

Tutorial zur Installation von Ceph Distributed Storage mit Yum unter Centos7

Inhaltsverzeichnis Vorwort Konfigurieren Sie die ...

Manuelle Implementierung des bidirektionalen Datenbindungsprinzips von Vue2.0

In einem Satz: Datenentführung (Object.defineProp...

Der einfachste Weg, das MySQL-Root-Passwort zurückzusetzen

Meine MySQL-Version ist MySQL V5.7.9, bitte verwe...

Über das WeChat-Gleitproblem des UniApp-Editors

Das Uniapp-Applet wird ein ähnliches Dropdown-Pro...

Zusammenfassung der Berechtigungsprobleme bei gespeicherten MySQL-Prozeduren

Ja, gespeicherte MySQL-Prozeduren scheinen sehr s...

CSS entfernt den gepunkteten Rahmen, der beim Klicken auf einen Link entsteht. Kompatibel mit Browsern, die den W3C-Standards entsprechen

Teil des Codes: Code kopieren Der Code lautet wie...

Die CSS-Priorität der Webseite wird für Sie ausführlich erklärt

Bevor wir über die CSS-Priorität sprechen, müssen...

Gründe und Lösungen für das fehlgeschlagene Einfügen von Emoji-Ausdrücken in MySQL

Fehlerszenario Beim Aufrufen von JDBC zum Einfüge...

Zusammenfassung häufig verwendeter Operatoren und Funktionen in MySQL

Lassen Sie uns zuerst die Datentabelle erstellen....

Detaillierter Prozess der Installation von Jenkins-2.249.3-1.1 mit Docker

Inhaltsverzeichnis 1. Docker installieren 2. Zieh...

Beispielanalyse der Verwendung von Dockerfile-Textdateien

Dockerfile ist eine Textdatei, die zum Erstellen ...

Fallstudie zu den SQL ROW_NUMBER()- und OVER()-Methoden

Syntaxformat: row_number() über (Partition durch ...

So laden Sie das JAR-Paket über die Webseite auf Nexus hoch

Wie lädt man das JAR-Paket in ein privates Lager ...

Grundlegende Ideen zum Auffinden von Fehlern in der Web-Frontend-Entwicklung

Die WEB-Entwicklung besteht hauptsächlich aus zwe...