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

So erstellen Sie mit Photoshop ein Web-Drahtgittermodell

Dieser Beitrag stellt eine Reihe kostenloser Phot...

Analyse des neuen Ressourcenmanagementsystems von CocosCreator

Inhaltsverzeichnis 1. Ressourcen und Konstruktion...

So vergessen Sie das Root-Passwort in Mysql8.0.13 unter Windows 10

1. Stoppen Sie zuerst den MySQL-Dienst Öffnen Sie...

Detaillierte Erläuterung verschiedener Möglichkeiten zum Exportieren von Daten in Mysql

Es gibt viele Gründe für den Export von MySQL-Dat...

So melden Sie sich unter Shell schnell ohne Kennwort bei der MySQL-Datenbank an

Hintergrund Wenn wir uns über den MySQL-Client in...

Organisationsstruktur der Vue-Komponente und Details zur Komponentenregistrierung

Inhaltsverzeichnis 1. Komponentenorganisation 2. ...

Ein kurzes Verständnis mehrerer Planungsalgorithmen für den siebenschichtigen Lastenausgleich von Nginx

In diesem Artikel werden hauptsächlich mehrere Pl...

Detaillierte Erläuterung des Implementierungsprinzips der bidirektionalen Datenbindung von Vue2.0/3.0

Das Implementierungsprinzip der bidirektionalen D...

Eine kurze Analyse von Unterabfragen und erweiterten Anwendungen in der MySql-Datenbank

Unterabfrage in der MySql-Datenbank: Unterabfrage...

Implementierungsmethode des Nginx+Tomcat-Lastausgleichsclusters

Die experimentelle Umgebung ist wie folgt Hier mü...

Jmeter stellt eine Verbindung zum Datenbankprozessdiagramm her

1. Laden Sie den MySQL-JDBC-Treiber (mysql-connec...

WeChat-Miniprogramm zur Implementierung elektronischer Signaturen

In diesem Artikel finden Sie den spezifischen Cod...

Implementierung von MySQL Select in der Unterabfrageoptimierung

Die folgende Demonstration basiert auf MySQL Vers...

Einige kleine Methoden, die häufig in HTML-Seiten verwendet werden

Fügen Sie das Tag <Head> hinzu <meta http...

Samba-Serverkonfiguration unter Centos7 (tatsächlicher Kampf)

Samba Übersicht Samba ist eine kostenlose Softwar...