文章目录
- 前言
- 一、项目目标
- 二、页面布局
-
- 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，中间导航区域&#
