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

Mysql gibt die Methode zur Datumsbereichsextraktion an

Bei der Datenbankoperation ist der Umgang mit Dat...

So verwenden Sie das Schreiben von Dateien zum Debuggen einer Linux-Anwendung

Unter Linux ist alles eine Datei, daher besteht d...

Details zum Schreiben von React in einem Vue-Projekt

Wir können jsx/tsx-Dateien direkt erstellen Die P...

Dieser Artikel zeigt Ihnen detailliert, wie Sie SQL CASE WHEN verwenden

Inhaltsverzeichnis Einfache CASEWHEN-Funktion: Di...

Beschreibung der Ausführungsmechanismen von statischen Seiten und dynamischen Seiten

1. Eine statische Seite bedeutet, dass die Webseit...

So gehen Sie mit dem Verlust von Parametern um, wenn Sie die Seite aktualisieren und Parameter an den Vue-Router übergeben

Inhaltsverzeichnis Überblick Methode 1: Parameter...

Detaillierte Analyse der MySQL-Abfrageabfangung

Inhaltsverzeichnis 1. Abfrageoptimierung 1. MySQL...

Die neue CSS-Funktion enthält Probleme beim Neuzeichnen und Neuanordnen von Steuerelementen.

Bevor die neue CSS-Eigenschaft „contain“ vorgeste...

Verwenden Sie three.js, um coole 3D-Seiteneffekte im Acid-Stil zu erzielen

In diesem Artikel wird hauptsächlich die Verwendu...

Vollständiger Prozessdatensatz zur Fehlerbehebung bei MySQL DeadLock

【Autor】 Liu Bo: Leitender Datenbankmanager im Ctr...

Detaillierte Beschreibung von nginx von der Kompilierung und Installation bis zur Beschreibung der Konfigurationsdatei auf Chinesisch

Dieser Artikel stellt Nginx ausführlich vor, von ...

Docker-Zeitzonenproblem und Datenmigrationsproblem

Neueste Lösung: -v /usr/share/zoneinfo/Asia/Shang...

So verwenden Sie den Flat Style zum Gestalten von Websites

Das Wesen einer flachen Website-Struktur liegt in...

Beheben Sie das Problem, dass weder der Repository- noch der Tag-Name leer sind, nachdem Docker ein neues Image geladen hat.

Sie können den folgenden Befehl verwenden: Docker...

Installationsschritte für die chinesische Eingabemethode von Ubuntu 20.04

Dieser Artikel installiert die Google-Eingabemeth...