Vue3(三)網(wǎng)站首頁(yè)布局開(kāi)發(fā)
一、前言
上篇文章Vue3集成Ant Design Vue 已經(jīng)提到集成Ant Design Vue后,和Element Ui一樣,還是組件的使用,然后就是復(fù)制粘貼改了。
二、實(shí)際案例
先搞個(gè)布局布局看看,也就是我們說(shuō)的layout
,如下圖:
不在Home
中修改,因?yàn)槭裁?,每個(gè)頁(yè)面都有頭部和底部,寫(xiě)起來(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ò)并沒(méi)有什么可怕的,不要慌,重啟服務(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è)布局開(kāi)發(fā) 的文章就介紹到這了,更多相關(guān)Vue3
網(wǎng)站首頁(yè)布局開(kāi)發(fā)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- 使用Vue3創(chuàng)建多布局系統(tǒng)的三種方法
- vue3.0+element Plus實(shí)現(xiàn)頁(yè)面布局側(cè)邊欄菜單路由跳轉(zhuǎn)功能
- vue3容器布局和導(dǎo)航路由實(shí)現(xiàn)示例
- Vue3.0利用vue-grid-layout插件實(shí)現(xiàn)拖拽布局
- Vue3中使用vuedraggable拖拽實(shí)戰(zhàn)教程
- vue3使用vuedraggable實(shí)現(xiàn)拖拽功能
- vue3.x 使用jsplumb實(shí)現(xiàn)拖拽連線
- vue3 座位選座矩陣布局的實(shí)現(xiàn)方法(可點(diǎn)擊選中拖拽調(diào)換位置)
相關(guān)文章
使用vuedraggable實(shí)現(xiàn)從左向右拖拽功能
這篇文章主要為大家詳細(xì)介紹了使用vuedraggable實(shí)現(xiàn)從左向右拖拽功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04vue中img或元素背景圖片無(wú)法顯示或路徑錯(cuò)誤的解決
這篇文章主要介紹了vue中img或元素背景圖片無(wú)法顯示或路徑錯(cuò)誤的解決方案,具有很好的參考價(jià)值。希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08element中使用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è)置為全局變量的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09vue中jsencrypt與base64加密解密的實(shí)用流程
vue項(xiàng)目里面使用到的加密和解密的方法,本文主要介紹了vue中jsencrypt與base64加密解密的實(shí)用流程,具有一定的參考價(jià)值,感興趣的可以了解一下2023-10-10