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 を応援していただければ幸いです。

以下もご興味があるかもしれません: