1. はじめに前回の記事で、Vue3 に Ant Design Vue が統合されました。Ant Design Vue を統合した後も、Element Ui と同様にコンポーネントが使用され、コピーして貼り付けられると述べました。 2. 実際の事例まず、以下に示すように、 1. 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. ジャンプを達成するためにルートを変更する前述のように、ルートを確立し、動的部分へのジャンプ アクセスを実現するには、動的部分を変更するだけで済みます。ここでのヘッダーとフッター、およびセカンダリ メニューは変更されません。 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; } </スタイル> ホットデプロイメントコンパイル後のエラーは次のとおりです。 エラー レポートから、検証ルールがエラーを報告していることがわかります。簡単な方法は、未登録のコンポーネント js: ルール: 'コンソールなし': process.env.NODE_ENV === 'production' ? '警告' : 'オフ', 'デバッガーなし': process.env.NODE_ENV === 'production' ? 'warn' : 'オフ', 'vue/未使用コンポーネント':'オフ' } この自動コンパイルでは、以下に示すように、依然としてエラーが発生します。 エラーが報告されても恐れることはありません。慌てないでください。次のようにサービスを再起動してください。 今回はページアドレスに直接アクセスしてみたところ、以下のような結果になりました。 次に、以下に示すように、「About」ページにアクセスします。 3. 最後にルータビューの使用法 インターフェースプレースホルダーと同等 router-linkの使用法 ページジャンプ これで、Vue3 ウェブサイトのホームページレイアウトの開発に関するこの記事は終わりです。Vue3 以下もご興味があるかもしれません:
|
最近のプロジェクトでは、テキストを垂直に揃えたいと考え、CSS の writing-mode プロパ...
私はApacheを使ったことがありません。仕事を始めてからはずっとnginxを使っていました(運用保...
以下のように表示されます。 SELECT count(DISTINCT(a.rect_id)) zc...
1. トランザクションとは何ですか?データベース トランザクション (略称: トランザクション) は...
Taobao のウェブページはインポートを使用していますが、多くのウェブサイトはリンクを使用していま...
1. 準備1.1 VMware 15 をダウンロードしてインストールするダウンロード リンク: h...
目次序文仮想リストとは何ですか?デモ効果準備スクリーンの高さとボックスの高さ最適化要約する序文人気の...
幅と高さを直接使用することはできません。 display:block; または display:in...
この CSS リセットは、Eric Meyers の CSS リセットに基づいて変更されており、特に...
前面に書かれた最近、ある読者から、ブラウザからサーバーにアクセスすると、画像の表示が遅く、ブラウザに...
目次1. データベースプログラミングの基本条件2. Java でのデータベースプログラミング: JD...
おすすめの読み物: Navicat12.1シリーズのクラッキングとアクティベーションのチュートリアル...
1. 文法 場所 [=|~|~*|^~|@] /uri/ { ... } 2. 説明上記の構文から、...
時には、画像上に複数の領域を設定する必要があります。マウスで画像のさまざまな領域をクリックしてさまざ...
序文開発プロセスでは、ブラウザレベルでユーザーが実行した操作を記憶するなど、同様の要件に遭遇すること...