每时每刻项目总结

第一步：分析页面

1.配置相关基础配置

导入vant组件

import '../src/utils/vant'

导入rem

import 'lib-flexible'

配置全局路由钩子

// 全局路由钩子
router.beforeEach((to, from, next) => {
    document.title = to.meta.title || 'msmk' //标题
    next()
})

2.在views下面创建tabbar,点击可以跳转页面,并且在router的index.js文件中配置页面路由

    <div>
        <van-tabbar route active-color="#ee0a24" inactive-color="#000">
            <van-tabbar-item replace to="/index" icon="wap-home-o">首页</van-tabbar-item>
            <van-tabbar-item replace to="/course" icon="orders-o">课程</van-tabbar-item>
            <van-tabbar-item replace to="/record" icon="edit">预约记录</van-tabbar-item>
            <van-tabbar-item replace to="/practice" icon="records">练习</van-tabbar-item>
            <van-tabbar-item replace to="/login" icon="friends-o" @click="login">我的
            </van-tabbar-item>
        </van-tabbar>
    </div>

3.在首页一共有5个页面，首页，课程，约课记录，学习，我的

（一）.首页

在首页里面有轮播图区域，tab区域，以及数据渲染区域三部分

1.轮播图

在components下面创建index文件夹，在创建swiper轮播图页面，根据请求接口，把数据渲染出来

        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="item in banner" :key="item.link_content">
                <img style="width:100%;height:100%;" :src="item.banner_img" />
            </van-swipe-item>
        </van-swipe>

export const banners = () => Fetch.get("/banner")

2.tab栏数据，布局自己渲染就可以，就是样式的排版问题了

<div class="title">
       <ul>
           <li @click="$router.push('/course')">
           <van-icon name="balance-list" color="#ee0a24"/>
           <p>特色课</p>
           </li>
            <li>
           <van-icon name="cart" color="#73b3a5"/>
           <p>一对一辅导</p>
           </li>
            <li>
           <van-icon name="todo-list" color="#d88f72"/>
           <p>学习日历</p>
           </li>
        </ul> 
    </div>

3.数据列表的渲染,资深讲师，推荐课程，都是调用接口，然后根据页面结构排版，排完版之后请求接口，把返回的数据存在变量里面，然后用v-for循环遍历到页面上就行

export const tearchs=()=>Fetch.get('/recommend/appIndex')

<div class="teacher" >
        <div class="box" v-for="(item,index) in teachers" :key="index">
        <div class="top">
          <span> {
  {item.channel_info.name}} </span>
        </div>
        <ul >
            <li v-for="ite in item.list" :key="ite.teacher_id" v-show="ite.teacher_id" @click="$router.push('/teacherDetail?id='+ite.teacher_id)">
              <img :src="ite.teacher_avatar" alt="">
            <div class="right">
               <p>{
  {ite.teacher_name}}</p>
               <p>{
  {ite.introduction}}</p>
            </div>
            </li>
        </ul>
        <dl>
            <dd v-for="ite in item.list" :key="ite.id" v-show="ite.id"  @click="$router.push('/courceDetail?id='+ite.id)">