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 のインデックスと制約の例文

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

推薦する

CSS3を使用してテキストの垂直配置を実現する方法

最近のプロジェクトでは、テキストを垂直に揃えたいと考え、CSS の writing-mode プロパ...

Apacheドメイン名設定の落とし穴の詳細な説明

私はApacheを使ったことがありません。仕事を始めてからはずっとnginxを使っていました(運用保...

MySQL の列から行への変換と年月グループ化の例

以下のように表示されます。 SELECT count(DISTINCT(a.rect_id)) zc...

MySQLのトランザクション特性とレベル原則の分析

1. トランザクションとは何ですか?データベース トランザクション (略称: トランザクション) は...

CSSをインポートする方法は何ですか?linkと@importの違いは何ですか?選択方法

Taobao のウェブページはインポートを使用していますが、多くのウェブサイトはリンクを使用していま...

Ubuntu 19.04 インストール チュートリアル (画像とテキストの手順)

1. 準備1.1 VMware 15 をダウンロードしてインストールするダウンロード リンク: h...

WeChatアプレット仮想リストの応用例

目次序文仮想リストとは何ですか?デモ効果準備スクリーンの高さとボックスの高さ最適化要約する序文人気の...

ハイパーリンクの幅と高さを直接設定できない問題の解決策

幅と高さを直接使用することはできません。 display:block; または display:in...

HTML 5 スタイルシートのリセット

この CSS リセットは、Eric Meyers の CSS リセットに基づいて変更されており、特に...

nginx は画像表示の遅さとダウンロードの不完全さの問題を解決します

前面に書かれた最近、ある読者から、ブラウザからサーバーにアクセスすると、画像の表示が遅く、ブラウザに...

MySQL データベース JDBC プログラミング (Java は MySQL に接続します)

目次1. データベースプログラミングの基本条件2. Java でのデータベースプログラミング: JD...

Navicat for MySQL 11 登録コード\アクティベーションコードの概要

おすすめの読み物: Navicat12.1シリーズのクラッキングとアクティベーションのチュートリアル...

Nginx ロケーションマッチングルールの例

1. 文法 場所 [=|~|~*|^~|@] /uri/ { ... } 2. 説明上記の構文から、...

ウェブ画像のホットリンクと座標値を設定するサンプルコード

時には、画像上に複数の領域を設定する必要があります。マウスで画像のさまざまな領域をクリックしてさまざ...

jsはユーザーのページ操作を記憶するためにクッキーを使用します

序文開発プロセスでは、ブラウザレベルでユーザーが実行した操作を記憶するなど、同様の要件に遭遇すること...