【Day2】【Vue】前端博客从0到1(首页功能模块初设计)

在前面将项目简单搭建完成后,我们开始在项目基础上在HelloWorld.vue上完成首页的总体设计

首先来看看今天要完成的效果
【Day2】【Vue】前端博客从0到1(首页功能模块初设计)_第1张图片
目前首页主要分为4各部分

  • 导航栏
  • 照片区
  • 博客区
  • 功能区

1. 导航区
导航区主要是使用了element-ui进行搭建:导航菜单
设计代码如下:

其中:default-active属性代表默认选中的菜单栏,mode代表菜单是横向还是纵向,@select是设置选中时执行的函数
2. 照片区
照片区主要是使用了element-ui的走马灯(链接)进行搭建
代码如下:

照片墙

3. 播客区和功能区
使用了card代码如下:

博客区

功能区

4. 首页的总体设计已经简单设计完成,接下来将完善各个组件功能代码


总体代码:






你可能感兴趣的:(前端vue.js)