欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue3（三）網(wǎng)站首頁(yè)布局開發(fā)

 更新時(shí)間：2021年10月18日 10:55:30   作者：久曲健  
這篇文章主要介紹了Vue3網(wǎng)站首頁(yè)布局開發(fā)，上篇文章已經(jīng)提到集成Ant Design Vue后，和Element Ui一樣，還是組件的使用，接下倆我們就來(lái)看看Vue3網(wǎng)站首頁(yè)布局開發(fā)的相關(guān)資料,需要的朋友可以參考下面文章的具體內(nèi)容

一、前言

上篇文章Vue3集成Ant Design Vue 已經(jīng)提到集成Ant Design Vue后，和Element Ui一樣，還是組件的使用，然后就是復(fù)制粘貼改了。

二、實(shí)際案例

先搞個(gè)布局布局看看，也就是我們說(shuō)的layout，如下圖：

不在Home中修改，因?yàn)槭裁?，每個(gè)頁(yè)面都有頭部和底部，寫起來(lái)較麻煩，而變化動(dòng)態(tài)的部分放在Home里面維護(hù)即可。

1、修改App.vue

先忽略路由問(wèn)題，在App.vue中修改，示例代碼如下：

html：

<template>
  <a-layout>
    <a-layout-header class="header">
      <div class="logo" />
      <a-menu
          theme="dark"
          mode="horizontal"
          v-model:selectedKeys="selectedKeys1"
          :style="{ lineHeight: '64px' }"
      >
        <a-menu-item key="1">nav 1</a-menu-item>
        <a-menu-item key="2">nav 2</a-menu-item>
        <a-menu-item key="3">nav 3</a-menu-item>
      </a-menu>
    </a-layout-header>
    <a-layout>
      <a-layout-sider width="200" style="background: #fff">
        <a-menu
            mode="inline"
            v-model:selectedKeys="selectedKeys2"
            v-model:openKeys="openKeys"
            :style="{ height: '100%', borderRight: 0 }"
        >
          <a-sub-menu key="sub1">
            <template #title>
              <span>
                <user-outlined />
                subnav 1
              </span>
            </template>
            <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-sub-menu>
          <a-sub-menu key="sub2">
            <template #title>
              <span>
                <laptop-outlined />
                subnav 2
              </span>
            </template>
            <a-menu-item key="5">option5</a-menu-item>
            <a-menu-item key="6">option6</a-menu-item>
            <a-menu-item key="7">option7</a-menu-item>
            <a-menu-item key="8">option8</a-menu-item>
          </a-sub-menu>
          <a-sub-menu key="sub3">
            <template #title>
              <span>
                <notification-outlined />
                subnav 3
              </span>
            </template>
            <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-sub-menu>
        </a-menu>
      </a-layout-sider>
      <a-layout style="padding: 0 24px 24px">
        <a-breadcrumb style="margin: 16px 0">
          <a-breadcrumb-item>Home</a-breadcrumb-item>
          <a-breadcrumb-item>List</a-breadcrumb-item>
          <a-breadcrumb-item>App</a-breadcrumb-item>
        </a-breadcrumb>
        <a-layout-content
            :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }"
        >
          Content
        </a-layout-content>
      </a-layout>
    </a-layout>
    <a-layout-footer style="text-align: center">
      Ant Design ©2018 Created by Ant UED
    </a-layout-footer>
  </a-layout>
</template>

<style>
#components-layout-demo-top-side-2 .logo {
  float: left;
  width: 120px;
  height: 31px;
  margin: 16px 24px 16px 0;
  background: rgba(255, 255, 255, 0.3);
}

.ant-row-rtl #components-layout-demo-top-side-2 .logo {
  float: right;
  margin: 16px 0 16px 24px;
}

.site-layout-background {
  background: #fff;
}
</style>

效果如圖：

2、調(diào)整布局

咋一看，樣式和布局比較亂，我在調(diào)整下布局，對(duì)代碼進(jìn)行修改如下：

html：

<template>
  <a-layout>
    <a-layout-header class="header">
      <div class="logo" />
      <a-menu
          theme="dark"
          mode="horizontal"
          v-model:selectedKeys="selectedKeys1"
          :style="{ lineHeight: '64px' }"
      >
        <a-menu-item key="1">nav 1</a-menu-item>
        <a-menu-item key="2">nav 2</a-menu-item>
        <a-menu-item key="3">nav 3</a-menu-item>
      </a-menu>
    </a-layout-header>
    <a-layout>
      <a-layout-sider width="200" style="background: #fff">
        <a-menu
            mode="inline"
            v-model:selectedKeys="selectedKeys2"
            v-model:openKeys="openKeys"
            :style="{ height: '100%', borderRight: 0 }"
        >
          <a-sub-menu key="sub1">
            <template #title>
                <span>
                  <user-outlined />
                  subnav 1
                </span>
            </template>
            <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-sub-menu>
          <a-sub-menu key="sub2">
            <template #title>
                <span>
                  <laptop-outlined />
                  subnav 2
                </span>
            </template>
            <a-menu-item key="5">option5</a-menu-item>
            <a-menu-item key="6">option6</a-menu-item>
            <a-menu-item key="7">option7</a-menu-item>
            <a-menu-item key="8">option8</a-menu-item>
          </a-sub-menu>
          <a-sub-menu key="sub3">
            <template #title>
                <span>
                  <notification-outlined />
                  subnav 3
                </span>
            </template>
            <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-sub-menu>
        </a-menu>
      </a-layout-sider>
      <a-layout-content
          :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }"
      >
        Content
      </a-layout-content>
    </a-layout>
    <a-layout-footer style="text-align: center">
      軟件測(cè)試君 ©2021 Created by 六哥
    </a-layout-footer>
  </a-layout>
</template>

<style>
#components-layout-demo-top-side-2 .logo {
  float: left;
  width: 120px;
  height: 31px;
  margin: 16px 24px 16px 0;
  background: rgba(255, 255, 255, 0.3);
}

.ant-row-rtl #components-layout-demo-top-side-2 .logo {
  float: right;
  margin: 16px 0 16px 24px;
}

.site-layout-background {
  background: #fff;
}
</style>

修改完效果如下：

3、修改路由實(shí)現(xiàn)跳轉(zhuǎn)

前面已經(jīng)說(shuō)到，只需修改動(dòng)態(tài)部分建立路由，實(shí)現(xiàn)跳轉(zhuǎn)訪問(wèn)動(dòng)態(tài)部分即可，這里的頁(yè)頭和頁(yè)腳不會(huì)改變及二級(jí)菜單，只修改content部分即可。

修改Home.vue，示例代碼如下：

js：

<template>
  <a-layout>
    <a-layout-sider width="200" style="background: #fff">
      <a-menu
          mode="inline"
          v-model:selectedKeys="selectedKeys2"
          v-model:openKeys="openKeys"
          :style="{ height: '100%', borderRight: 0 }"
      >
        <a-sub-menu key="sub1">
          <template #title>
                <span>
                  <user-outlined />
                  subnav 1
                </span>
          </template>
          <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-sub-menu>
        <a-sub-menu key="sub2">
          <template #title>
                <span>
                  <laptop-outlined />
                  subnav 2
                </span>
          </template>
          <a-menu-item key="5">option5</a-menu-item>
          <a-menu-item key="6">option6</a-menu-item>
          <a-menu-item key="7">option7</a-menu-item>
          <a-menu-item key="8">option8</a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sub3">
          <template #title>
                <span>
                  <notification-outlined />
                  subnav 3
                </span>
          </template>
          <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-sub-menu>
      </a-menu>
    </a-layout-sider>
    <a-layout-content
        :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }"
    >
      Content
    </a-layout-content>
  </a-layout>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src

export default defineComponent({
  name: 'Home',
  components: {
    HelloWorld,
  },
});
</script>

修改App.vue實(shí)現(xiàn)路由跳轉(zhuǎn)：示例代碼如下：

html：

<template>
  <a-layout>
    <a-layout-header class="header">
      <div class="logo" />
      <a-menu
          theme="dark"
          mode="horizontal"
          v-model:selectedKeys="selectedKeys1"
          :style="{ lineHeight: '64px' }"
      >
        <a-menu-item key="1">nav 1</a-menu-item>
        <a-menu-item key="2">nav 2</a-menu-item>
        <a-menu-item key="3">nav 3</a-menu-item>
      </a-menu>
    </a-layout-header>
    <router-view/>
    <a-layout-footer style="text-align: center">
      軟件測(cè)試君 ©2021 Created by 六哥
    </a-layout-footer>
  </a-layout>
</template>

<style>
#components-layout-demo-top-side-2 .logo {
  float: left;
  width: 120px;
  height: 31px;
  margin: 16px 24px 16px 0;
  background: rgba(255, 255, 255, 0.3);
}

.ant-row-rtl #components-layout-demo-top-side-2 .logo {
  float: right;
  margin: 16px 0 16px 24px;
}

.site-layout-background {
  background: #fff;
}
</style>

熱部署編譯后報(bào)錯(cuò)如下圖：

從報(bào)錯(cuò)的得知，校驗(yàn)規(guī)則報(bào)錯(cuò)，很簡(jiǎn)單一個(gè)是刪除未注冊(cè)組件HelloWorld，第二種方法，就是修改校驗(yàn)文件規(guī)則，在eslintrc.js中添加如下內(nèi)容：

js：

  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'vue/no-unused-components':'off'
  }

這是自動(dòng)編譯還是會(huì)報(bào)錯(cuò)，如下圖：

報(bào)錯(cuò)并沒有什么可怕的，不要慌，重啟服務(wù)如下：

這次我直接訪問(wèn)頁(yè)面地址，效果如下：

再來(lái)訪問(wèn)about頁(yè)面，如下圖：

三、最后

router-view的用法

相當(dāng)于一個(gè)界面占位符

router-link to的用法

用于頁(yè)面跳轉(zhuǎn)

到此這篇關(guān)于Vue3網(wǎng)站首頁(yè)布局開發(fā) 的文章就介紹到這了,更多相關(guān)Vue3網(wǎng)站首頁(yè)布局開發(fā)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • 使用vuedraggable實(shí)現(xiàn)從左向右拖拽功能

    使用vuedraggable實(shí)現(xiàn)從左向右拖拽功能

    這篇文章主要為大家詳細(xì)介紹了使用vuedraggable實(shí)現(xiàn)從左向右拖拽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2022-04-04
  • Vue組件文檔生成工具庫(kù)的方法

    Vue組件文檔生成工具庫(kù)的方法

    本文主要介紹了Vue組件文檔生成工具庫(kù)的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2021-08-08
  • Vue3生命周期鉤子函數(shù)詳解

    Vue3生命周期鉤子函數(shù)詳解

    這篇文章主要為大家詳細(xì)介紹了Vue3生命周期鉤子函數(shù)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2022-01-01
  • element-ui直接在表格中點(diǎn)擊單元格編輯

    element-ui直接在表格中點(diǎn)擊單元格編輯

    最近通過(guò)在網(wǎng)上查找資料，自己整合研究了一個(gè)可以直接在表格中操作數(shù)據(jù)的基于element-ui的前端模板?？梢宰屧龈臄?shù)據(jù)的操作顯得方便一點(diǎn)，感興趣的可以了解一下
    2021-12-12
  • 動(dòng)態(tài)Axios的配置步驟詳解

    動(dòng)態(tài)Axios的配置步驟詳解

    這篇文章主要給大家分享介紹了關(guān)于動(dòng)態(tài)Axios的配置步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，通過(guò)這個(gè)教程大家可以很方便的實(shí)現(xiàn)動(dòng)態(tài)Axios的配置，需要的朋友可以參考借鑒，下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。
    2018-01-01
  • Vue.js?前端路由和異步組件介紹

    Vue.js?前端路由和異步組件介紹

    這篇文章主要介紹了Vue.js?前端路由和異步組件介紹，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下
    2022-09-09
  • vue中img或元素背景圖片無(wú)法顯示或路徑錯(cuò)誤的解決

    vue中img或元素背景圖片無(wú)法顯示或路徑錯(cuò)誤的解決

    這篇文章主要介紹了vue中img或元素背景圖片無(wú)法顯示或路徑錯(cuò)誤的解決方案，具有很好的參考價(jià)值。希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2022-08-08
  • element中使用formdata進(jìn)行上傳文件的方法

    element中使用formdata進(jìn)行上傳文件的方法

    本文主要介紹了elementUI中使用formdata進(jìn)行上傳文件的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2023-03-03
  • 在vue項(xiàng)目中,將juery設(shè)置為全局變量的方法

    在vue項(xiàng)目中,將juery設(shè)置為全局變量的方法

    今天小編就為大家分享一篇在vue項(xiàng)目中,將juery設(shè)置為全局變量的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2018-09-09
  • vue中jsencrypt與base64加密解密的實(shí)用流程

    vue中jsencrypt與base64加密解密的實(shí)用流程

    vue項(xiàng)目里面使用到的加密和解密的方法,本文主要介紹了vue中jsencrypt與base64加密解密的實(shí)用流程,具有一定的參考價(jià)值,感興趣的可以了解一下
    2023-10-10

最新評(píng)論