am

src/api/home.js

@@ -0,0 +1,6 @@
+import { post, get } from '../utils/request'
+
+
+export const indexImgs = () => get("/indexImgs")
+
+export const noticeList = () => get("/shop/notice/noticeList")

src/components/Layout.vue

@@ -0,0 +1,19 @@
+<template>
+    <div class="layout">
+        <router-view />
+        <Tabber />
+    </div>
+</template>
+<script>
+import Tabber from '@/components/Tabber.vue'
+export default {
+    components: {
+        Tabber
+    }
+}
+</script>
+<style lang="less">
+.layout {
+    height: 100%;
+}
+</style>

src/main.js

@@ -4,8 +4,17 @@ import router from './router'
 import store from './store'
 Vue.config.productionTip = false
 
-import { Image as VanImage, Form, Field, Button, Tabbar, TabbarItem } from 'vant';
+import { Image as VanImage, Form, Field, Search, Swipe, Grid, GridItem, NoticeBar,
+   Button, Tabbar, TabbarItem, SwipeItem, Tag } from 'vant';
 
+
+Vue.use(Tag);
+Vue.use(NoticeBar)
+Vue.use(Grid);
+Vue.use(GridItem);
+Vue.use(Swipe);
+Vue.use(SwipeItem);
+Vue.use(Search);
 Vue.use(VanImage)
 Vue.use(Form)
 Vue.use(Field)

src/router/index.js

@@ -6,29 +6,36 @@ import Me from '../views/Me.vue'
 import Home from '../views/Home.vue'
 import Category from '../views/Category.vue'
 import ShopCart from '../views/ShopCart.vue'
+import Layout from '../components/Layout.vue'
 
 Vue.use(VueRouter)
 
 const routes = [
   {
-    path: '/me',
-    name: 'me',
-    component: Me
-  },
-  {
-    path: '/home',
-    name: 'home',
-    component: Home
-  },
-  {
-    path: '/category',
-    name: 'category',
-    component: Category
-  },
-  {
-    path: '/shopCart',
-    name: 'shopCart',
-    component: ShopCart
+    path: "/",
+    component: Layout,
+    children: [
+      {
+        path: '/me',
+        name: 'me',
+        component: Me
+      },
+      {
+        path: '/home',
+        name: 'home',
+        component: Home
+      },
+      {
+        path: '/category',
+        name: 'category',
+        component: Category
+      },
+      {
+        path: '/shopCart',
+        name: 'shopCart',
+        component: ShopCart
+      }
+    ]
   },
   {
     path: '/login',

src/views/Category.vue

@@ -1,17 +1,12 @@
 <template>
     <div>
         <h1>分类</h1>
-        <Tabber />
     </div>
 </template>
 <script>
-import Tabber from '@/components/Tabber.vue';
 export default {
     data(){
         return {}
-    },
-    components:{
-        Tabber
     }
 }
 </script>

src/views/Home.vue

@@ -1,19 +1,89 @@
 <template>
     <div>
-        <h1>主页</h1>
-        <Tabber />
+        <!-- 搜索  -->
+        <van-search placeholder="请输入搜索关键词" />
+
+        <!-- 轮播 -->
+        <van-swipe class="my-swipe" indicator-color="white" style="height: 12rem">
+            <van-swipe-item v-for="img in images" :key="img.imgUrl">
+                <van-image :src="img.imgUrl" fit="fill" />
+            </van-swipe-item>
+        </van-swipe>
+        <div style="width: 100%; height: .5rem;"></div>
+
+        <!-- 导航 -->
+        <van-grid :border="false">
+            <van-grid-item icon="new-arrival-o" text="新品推荐" />
+            <van-grid-item icon="underway-o" text="限时特惠" />
+            <van-grid-item icon="hot-o" text="每日疯抢" />
+            <van-grid-item icon="coupon-o" text="领优惠券" />
+        </van-grid>
+
+        <!-- 通知栏 -->
+        <van-notice-bar left-icon="volume-o" :scrollable="false">
+            <van-swipe vertical class="notice-swipe" :autoplay="3000" :show-indicators="false">
+                <van-swipe-item v-for="item in noticeList.records">{{ item.title }}</van-swipe-item>
+            </van-swipe>
+        </van-notice-bar>
+
+        <!-- 商品列表 -->
+        <div class="produc-list">
+            <div style="width: 100%; height: 2rem;"></div>
+            <div class="list-title">
+                <span class="title">每日上新</span><span class="more">查看更多</span>
+            </div>
+            <van-grid :border="false" :column-num="3">
+                <van-grid-item>
+                    <van-image src="https://img01.yzcdn.cn/vant/apple-1.jpg" />
+                    <div>我是商品介绍我是商品介绍</div>
+                    <div>$188.88</div>
+                </van-grid-item>
+            </van-grid>
+        </div>
     </div>
 </template>
 <script>
-import Tabber from '@/components/Tabber.vue';
+import { indexImgs, noticeList } from '../api/home'
 export default {
-    data(){
-        return {}
+    data() {
+        return {
+            images: [],
+            noticeList: []
+        }
     },
-    components:{
-        Tabber
+    async created() {
+        this.images = await indexImgs()
+        this.noticeList = await noticeList()
     }
 }
 </script>
 <style lang="less">
+.produc-list {
+    .list-title {
+        .title {
+            display: inline-block;
+            text-align: left;
+            width: 50%;
+            padding-left: 1rem;
+        }
+
+        .more {
+            display: inline-block;
+            text-align: right;
+            width: 40%;
+            padding-right: 1rem;
+        }
+    }
+}
+
+.my-swipe .van-swipe-item {
+    .van-image {
+        height: 100%;
+    }
+}
+
+.notice-swipe {
+    height: 40px;
+    line-height: 40px;
+}
 </style>

src/views/Me.vue

@@ -1,17 +1,12 @@
 <template>
     <div class="me">
         <h1>我的</h1>
-        <Tabber />
     </div>
 </template>
 <script>
-import Tabber from '@/components/Tabber.vue';
 export default {
     data(){
         return {}
-    },
-    components:{
-        Tabber
     }
 }
 </script>

src/views/ShopCart.vue

@@ -1,17 +1,12 @@
 <template>
     <div>
         <h1>购物车</h1>
-        <Tabber />
     </div>
 </template>
 <script>
-import Tabber from '@/components/Tabber.vue';
 export default {
     data(){
         return {}
-    },
-    components:{
-        Tabber
     }
 }
 </script>