Vue3 (III) ウェブサイトホームページレイアウト開発

Vue3 (III) ウェブサイトホームページレイアウト開発

1. はじめに

前回の記事で、Vue3 に Ant Design Vue が統合されました。Ant Design Vue を統合した後も、Element Ui と同様にコンポーネントが使用され、コピーして貼り付けられると述べました。

2. 実際の事例

まず、以下に示すように、 layoutと呼ばれるレイアウトを作成しましょう

Homeでは変更しないでください。なぜでしょうか? すべてのページにはヘッダーとフッターがあり、これらを書くのは面倒です。動的に変化する部分はHomeで管理できます。

1. App.vueを変更する

ルーティングの問題は今のところ無視して、 App.vueで修正します。サンプルコードは次のとおりです。

html:

<テンプレート>
  <a-レイアウト>
    <a-layout-headerクラス="header">
      <div class="logo" />
      <a-メニュー
          テーマ="ダーク"
          モード="水平"
          v-model:selectedKeys="選択されたキー1"
          :style="{ 行の高さ: '64px' }"
      >
        <a-menu-item key="1">ナビゲーション 1</a-menu-item>
        <a-menu-item key="2">ナビゲーション 2</a-menu-item>
        <a-menu-item key="3">ナビゲーション 3</a-menu-item>
      </a-メニュー>
    </a-レイアウト-ヘッダー>
    <a-レイアウト>
      <a-layout-sider width="200" style="background: #fff">
        <a-メニュー
            モード="インライン"
            v-model:selectedKeys="selectedKeys2"
            v-model:openKeys="openKeys"
            :style="{ 高さ: '100%', 右境界線: 0 }"
        >
          <a-サブメニューキー="sub1">
            <テンプレート #タイトル>
              <span>
                <ユーザーによるアウトライン />
                サブナビ1
              </span>
            </テンプレート>
            <a-menu-item key="1">オプション1</a-menu-item>
            <a-menu-item key="2">オプション2</a-menu-item>
            <a-menu-item key="3">オプション3</a-menu-item>
            <a-menu-item key="4">オプション4</a-menu-item>
          </a-サブメニュー>
          <a-サブメニューキー="sub2">
            <テンプレート #タイトル>
              <span>
                <ラップトップのアウトライン />
                サブナビ2
              </span>
            </テンプレート>
            <a-menu-item key="5">オプション5</a-menu-item>
            <a-menu-item key="6">オプション6</a-menu-item>
            <a-menu-item key="7">オプション7</a-menu-item>
            <a-menu-item key="8">オプション8</a-menu-item>
          </a-サブメニュー>
          <a-サブメニューキー="sub3">
            <テンプレート #タイトル>
              <span>
                <通知の概要 />
                サブナビ3
              </span>
            </テンプレート>
            <a-menu-item key="9">オプション9</a-menu-item>
            <a-menu-item key="10">オプション10</a-menu-item>
            <a-menu-item key="11">オプション11</a-menu-item>
            <a-menu-item key="12">オプション12</a-menu-item>
          </a-サブメニュー>
        </a-メニュー>
      </a-layout-sider>
      <a-layout スタイル="padding: 0 24px 24px">
        <a-breadcrumb style="margin: 16px 0">
          <a-breadcrumb-item>ホーム</a-breadcrumb-item>
          <a-breadcrumb-item>リスト</a-breadcrumb-item>
          <a-breadcrumb-item>アプリ</a-breadcrumb-item>
        </a-breadcrumb>
        <レイアウトコンテンツ
            :style="{ 背景: '#fff', パディング: '24px', マージン: 0, 最小高さ: '280px' }"
        >
          コンテンツ
        </a-レイアウトコンテンツ>
      </a-レイアウト>
    </a-レイアウト>
    <a-layout-footer スタイル="text-align: center">
      Ant Design ©2018 Ant UED 作成
    </a-レイアウト-フッター>
  </a-レイアウト>
</テンプレート>

<スタイル>
#コンポーネントレイアウトデモトップサイド2.ロゴ{
  フロート: 左;
  幅: 120ピクセル;
  高さ: 31px;
  マージン: 16px 24px 16px 0;
  背景: rgba(255, 255, 255, 0.3);
}

.ant-row-rtl #components-layout-demo-top-side-2 .logo {
  フロート: 右;
  マージン: 16px 0 16px 24px;
}

.サイトレイアウト背景 {
  背景: #fff;
}
</スタイル>

効果は以下のようになります。

2. レイアウトを調整する

一見すると、スタイルとレイアウトが乱雑です。レイアウトを調整し、コードを次のように変更しました。

html:

<テンプレート>
  <a-レイアウト>
    <a-layout-headerクラス="header">
      <div class="logo" />
      <a-メニュー
          テーマ="ダーク"
          モード="水平"
          v-model:selectedKeys="選択されたキー1"
          :style="{ 行の高さ: '64px' }"
      >
        <a-menu-item key="1">ナビゲーション 1</a-menu-item>
        <a-menu-item key="2">ナビゲーション 2</a-menu-item>
        <a-menu-item key="3">ナビゲーション 3</a-menu-item>
      </a-メニュー>
    </a-レイアウト-ヘッダー>
    <a-レイアウト>
      <a-layout-sider width="200" style="background: #fff">
        <a-メニュー
            モード="インライン"
            v-model:selectedKeys="selectedKeys2"
            v-model:openKeys="openKeys"
            :style="{ 高さ: '100%', 右境界線: 0 }"
        >
          <a-サブメニューキー="sub1">
            <テンプレート #タイトル>
                <span>
                  <ユーザーによるアウトライン />
                  サブナビ1
                </span>
            </テンプレート>
            <a-menu-item key="1">オプション1</a-menu-item>
            <a-menu-item key="2">オプション2</a-menu-item>
            <a-menu-item key="3">オプション3</a-menu-item>
            <a-menu-item key="4">オプション4</a-menu-item>
          </a-サブメニュー>
          <a-サブメニューキー="sub2">
            <テンプレート #タイトル>
                <span>
                  <ラップトップのアウトライン />
                  サブナビ2
                </span>
            </テンプレート>
            <a-menu-item key="5">オプション5</a-menu-item>
            <a-menu-item key="6">オプション6</a-menu-item>
            <a-menu-item key="7">オプション7</a-menu-item>
            <a-menu-item key="8">オプション8</a-menu-item>
          </a-サブメニュー>
          <a-サブメニューキー="sub3">
            <テンプレート #タイトル>
                <span>
                  <通知の概要 />
                  サブナビ3
                </span>
            </テンプレート>
            <a-menu-item key="9">オプション9</a-menu-item>
            <a-menu-item key="10">オプション10</a-menu-item>
            <a-menu-item key="11">オプション11</a-menu-item>
            <a-menu-item key="12">オプション12</a-menu-item>
          </a-サブメニュー>
        </a-メニュー>
      </a-layout-sider>
      <レイアウトコンテンツ
          :style="{ 背景: '#fff', パディング: '24px', マージン: 0, 最小高さ: '280px' }"
      >
        コンテンツ
      </a-レイアウトコンテンツ>
    </a-レイアウト>
    <a-layout-footer スタイル="text-align: center">
      ソフトウェアテスター©2021 Liuge 作成</a-layout-footer>
  </a-レイアウト>
</テンプレート>

<スタイル>
#コンポーネントレイアウトデモトップサイド2.ロゴ{
  フロート: 左;
  幅: 120ピクセル;
  高さ: 31px;
  マージン: 16px 24px 16px 0;
  背景: rgba(255, 255, 255, 0.3);
}

.ant-row-rtl #components-layout-demo-top-side-2 .logo {
  フロート: 右;
  マージン: 16px 0 16px 24px;
}

.サイトレイアウト背景 {
  背景: #fff;
}
</スタイル>

変更された効果は次のとおりです。

3. ジャンプを達成するためにルートを変更する

前述のように、ルートを確立し、動的部分へのジャンプ アクセスを実現するには、動的部分を変更するだけで済みます。ここでのヘッダーとフッター、およびセカンダリ メニューは変更されません。 content部分のみを変更する必要があります。

Home.vue を変更します。サンプルコードは次のとおりです。

js:

<テンプレート>
  <a-レイアウト>
    <a-layout-sider width="200" style="background: #fff">
      <a-メニュー
          モード="インライン"
          v-model:selectedKeys="selectedKeys2"
          v-model:openKeys="openKeys"
          :style="{ 高さ: '100%', 右境界線: 0 }"
      >
        <a-サブメニューキー="sub1">
          <テンプレート #タイトル>
                <span>
                  <ユーザーによるアウトライン />
                  サブナビ1
                </span>
          </テンプレート>
          <a-menu-item key="1">オプション1</a-menu-item>
          <a-menu-item key="2">オプション2</a-menu-item>
          <a-menu-item key="3">オプション3</a-menu-item>
          <a-menu-item key="4">オプション4</a-menu-item>
        </a-サブメニュー>
        <a-サブメニューキー="sub2">
          <テンプレート #タイトル>
                <span>
                  <ラップトップのアウトライン />
                  サブナビ2
                </span>
          </テンプレート>
          <a-menu-item key="5">オプション5</a-menu-item>
          <a-menu-item key="6">オプション6</a-menu-item>
          <a-menu-item key="7">オプション7</a-menu-item>
          <a-menu-item key="8">オプション8</a-menu-item>
        </a-サブメニュー>
        <a-サブメニューキー="sub3">
          <テンプレート #タイトル>
                <span>
                  <通知の概要 />
                  サブナビ3
                </span>
          </テンプレート>
          <a-menu-item key="9">オプション9</a-menu-item>
          <a-menu-item key="10">オプション10</a-menu-item>
          <a-menu-item key="11">オプション11</a-menu-item>
          <a-menu-item key="12">オプション12</a-menu-item>
        </a-サブメニュー>
      </a-メニュー>
    </a-layout-sider>
    <レイアウトコンテンツ
        :style="{ 背景: '#fff', パディング: '24px', マージン: 0, 最小高さ: '280px' }"
    >
      コンテンツ
    </a-レイアウトコンテンツ>
  </a-レイアウト>
</テンプレート>

<script lang="ts">
'vue' から defineComponent をインポートします。
import HelloWorld from '@/components/HelloWorld.vue'; // @ は /src へのエイリアスです

エクスポートデフォルトdefineComponent({
  名前: 'ホーム'、
  コンポーネント:
    こんにちは世界、
  },
});
</スクリプト>

App.vue を変更してルートジャンプを実装します。サンプルコードは次のとおりです。

html:

<テンプレート>
  <a-レイアウト>
    <a-layout-headerクラス="header">
      <div class="logo" />
      <a-メニュー
          テーマ="ダーク"
          モード="水平"
          v-model:selectedKeys="選択されたキー1"
          :style="{ 行の高さ: '64px' }"
      >
        <a-menu-item key="1">ナビゲーション 1</a-menu-item>
        <a-menu-item key="2">ナビゲーション 2</a-menu-item>
        <a-menu-item key="3">ナビゲーション 3</a-menu-item>
      </a-メニュー>
    </a-レイアウト-ヘッダー>
    <ルータービュー/>
    <a-layout-footer スタイル="text-align: center">
      ソフトウェアテスター©2021 Liuge 作成</a-layout-footer>
  </a-レイアウト>
</テンプレート>

<スタイル>
#コンポーネントレイアウトデモトップサイド2.ロゴ{
  フロート: 左;
  幅: 120ピクセル;
  高さ: 31px;
  マージン: 16px 24px 16px 0;
  背景: rgba(255, 255, 255, 0.3);
}

.ant-row-rtl #components-layout-demo-top-side-2 .logo {
  フロート: 右;
  マージン: 16px 0 16px 24px;
}

.サイトレイアウト背景 {
  背景: #fff;
}
</スタイル>

ホットデプロイメントコンパイル後のエラーは次のとおりです。

エラー レポートから、検証ルールがエラーを報告していることがわかります。簡単な方法は、未登録のコンポーネントHelloWorldを削除することです。2 番目の方法は、検証ファイルのルールを変更し、 eslintrc.jsに次のコンテンツを追加することです。

js:

  ルール:
    'コンソールなし': process.env.NODE_ENV === 'production' ? '警告' : 'オフ',
    'デバッガーなし': process.env.NODE_ENV === 'production' ? 'warn' : 'オフ',
    'vue/未使用コンポーネント':'オフ'
  }


この自動コンパイルでは、以下に示すように、依然としてエラーが発生します。

エラーが報告されても恐れることはありません。慌てないでください。次のようにサービスを再起動してください。

今回はページアドレスに直接アクセスしてみたところ、以下のような結果になりました。

次に、以下に示すように、「About」ページにアクセスします。

3. 最後に

ルータビューの使用法

インターフェースプレースホルダーと同等

router-linkの使用法

ページジャンプ

これで、Vue3 ウェブサイトのホームページレイアウトの開発に関するこの記事は終わりです。Vue3 Vue3サイトのホームページレイアウト開発に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vite2とVue3を使用したウェブサイトの国際化を実現するプロセス全体

<<:  MySQL のインデックスと制約の例文

>>:  ハイパーリンクに関するいくつかの質問

推薦する

Linux にバイナリ MySQL をインストールして MySQL パスワードをクラックする方法

1. システムに必要な libaio ソフトウェアがインストールされていることを確認します。インスト...

タブ切り替え機能を実装するJavaScriptカスタムプラグイン

この記事では、タブ切り替え機能を実装するためのJavaScriptの具体的なコードを参考までに共有し...

ボタンをクリックして画像を切り替える JavaScript

この記事の例では、ボタンをクリックすることで画像を切り替えることを実現するJavaScriptの具体...

nginx 用の zabbix 5.0 をインストールして展開する方法

目次実験環境インストールと展開データベースをインストールして設定します (ここでは mariadb ...

Mac VMware Fusion CentOS7 静的 IP 構成チュートリアル図

目次CentOS7をインストールする静的IPの設定viを使用してファイルを編集するCentOS7をイ...

Javascript における非同期待機の詳細な理解

この記事では、async/await がすべての JavaScript 開発者にとって非同期プログラ...

マインスイーパゲームを実装するための jQuery プラグイン (3)

この記事では、jQueryプラグインを使用してマインスイーパゲームを実装する方法に関する3番目の記事...

MySQLはconnect_by_isleaf MySQLメソッドまたはストアドプロシージャに似た機能を実装します

最近、特に異常なビジネス需要があり、テーブルがあります テーブル「デモ」を作成します( `id` i...

Windowsタイムサーバーの設定方法の詳しい説明

最近、会社のサーバーの時間が不正確で、外部の時間ソースと同期できないことがわかりました。会社はドメイ...

Nginx タイムアウト設定の詳細な説明

最近、プロジェクトで nginx を使用し、バックエンドで Java を使用しました。バックエンドで...

Better-scrollはメニューとコンテンツをリンクする効果を実現します

1. 基本的な使い方 <!DOCTYPE html> <html lang=&qu...

高さ:100% が機能しないのはなぜですか?

高さ:100% が機能しないのはなぜですか?この知識は不人気ではありませんが、使用する際には混乱する...

MySQLのさまざまなオブジェクトのサイズと長さの制限について話しましょう

目次識別子の長さ制限権限テーブルの範囲フィールドの長さ制限データベースとテーブルの数の制限テーブルサ...

Linux システムのパフォーマンスを分析するための top コマンドの詳細な説明

Linux topコマンドの紹介top コマンドは、Linux でよく使用されるパフォーマンス分析ツ...

HTML の左右レイアウトのサンプルコード

CS: ...コードをコピーコードは次のとおりです。 html,body{ margin:0px; ...