vue入门--商城公用底部导航栏

前言

项目基本初始化完成后，我们将开始以一个商城案例为目标进行开发。

一、创建项目页面目录

在src目录下新建pages文件夹，用于存放项目页面

二、新建首页组件文件夹

在pages下新建Home文件夹，用于存放首页所需组件。然后在Home文件夹下新建home.vue及components文件夹，home.vue为首页组件，components文件夹用于存放首页所需组件。

三、新建公用组件文件夹

在项目开发中，我们希望某些页面内容可以共用，这样方便以后统一使用，所以需要新建一个公用组件文件夹来存放项目共用组件。
首先，我们首页需要用到的共用底部导航栏，所以需要在src目录的components文件夹下新建一个footer.vue组件。

四、编辑项目路由

打开src → router → index.js
编辑index.js如下

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/pages/Home/home'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    }
  ]
})

五、初始化App.vue文件

打开src → App.vue
编辑App.vue如下

六、编辑首页组件

打开src → pages → Home → home.vue
编辑home.vue如下

然后我们需要在首页中引用共用底部导航栏，因此需要编辑如下

七、编辑共用底部导航栏组件

打开src → components → footer.vue
编辑footer.vue如下

首先，我们需要在template代码块中编写导航栏的结构层

    

      

      
{{item.itemName}}
    
  

然后编写script代码块

export default {
  name: 'CommonFooter',
  data () {
    return {
      itemList: [
        {
          itemIcon: '',
          itemName: '首页'
        },
        {
          itemIcon: '',
          itemName: '发现'
        },
        {
          itemIcon: '',
          itemName: '购物车'
        },
        {
          itemIcon: '',
          itemName: '我的'
        }
      ]
    }
  },
  props: {
    footerItem: String
  }
}

最后编写stylus代码块

.footer
  position absolute
  bottom 0
  left 0
  right 0
  height 1.28rem
  background #efefef
  border-top 1px solid #e5e5e5
  box-sizing border-box
  display flex
  align-items center
  justify-content center
  .item
    flex 1
    text-align center
    .item-icon
      font-size 0.65rem
    .item-name
      font-size 0.32rem
      color #595757
      margin-top 0.08rem
  .active
    .item-icon, .item-name
      color #ff4800

保存代码，运行cnpm run dev

cnpm run dev

页面展示为

文章教程比较简单，有不懂的地方可以留言询问，谢谢。