文章目录 前言 一、项目目标 二、页面布局 1.首页布局分析 2. 首页布局实现 App.vue LayoutIndex.vue LayoutLeft.vue Home.vue Home/components/Header.vue Home/components/Footer.vue 3.首页路由 4.首页效果显示 总结 前言 上一节,部署了vue3官方案例,我们需要结合自身项目页面的布局改造下目录结构。 这里涉及两个方面: 1)路由 2)页面layout 一、项目目标 我们的目标是用vue3开发一个网址导航的网站,方面我们工作中快速检索工具和信息查询。 导航网址不得不介绍webstack,我们在官方基础上进行二开。 项目地址 官方demo 二、页面布局 1.首页布局分析 首页左右布局,左侧导航栏目,右侧是导航内容 左侧上线布局,上面图标,下面栏目列表 右侧上中下布局,头部header,中间导航区域