第一步：用Code打开项目
第二步：
1.在assets里面放置图片和css样式等
2.router里面配置所需要跳转到的路由
例如要跳转到/index
{
path: '/index',
/*在views里面创建了一个文件夹名为index，index里面有一个名为index.vue文件*/
component: () => import('../views/index/index.vue')
},第三步：在views中放置自己所需要的文件
注意：如果创建里面有文件夹的话，就得在router里面配置路径的时候添加文件名称
第五步：首页分为上下两个部分：底部代码来回切换
<template>
<div id="footer">
<div class="footer-seat">
<van-tabbar v-model="active">
<van-tabbar-item icon="home-o">
<router-link to="./index">首页</router-link>
</van-tabbar-item>
<van-tabbar-item icon="gem-o">
<router-link to="./member">会员</router-link>
</van-tabbar-item>
<van-tabbar-item icon="records-o">
<router-link to="./order">订单</router-link>
</van-tabbar-item>
<van-tabbar-item icon="friends-o">
<router-link to="./my">我的</router-link>
</van-tabbar-item>
</van-tabbar>
</div>
</div>
</template>
<script>
export default {
data(){
return{
active: 0,
}
}
};
</script>
<style>
</style>实现效果：
第六步：在views中创建的index文件中放置四个文件
在header文件中创建那个创建头部的搜索功能
<template>
<div class="header">
<div class="header-user">
<van-icon name="contact"/>
</div>
<div class="header-position">
<h3>武汉</h3>
</div>
<div class="header-input">
<input type="text" placeholder="武汉黄鹤楼">
<van-icon name="search"/>
</div>
<div class="header-add">
<van-icon name="plus"/>
</div>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>实现功能：
在navmenu.vue文件中实现上面的美食外卖，超市便利等..
<template>
<div class="navmuen">
<ul>
<li>
<img src="../../assets/img/3.png">
<van-badge :content="5">
<div class="child" />
</van-badge>
<span>美食外卖</span>
</li>
<li>
<img src="../../assets/img/3.png">
<span>超市便利</span>
</li>
<li>
<img src="../../assets/img/3.png">
<span>水果</span>
</li>
<li>
<img src="../../assets/img/3.png">
<span>买菜</span>
</li>
<li>
<img src="../../assets/img/3.png">
<span>买菜</span>
</li>
<li>
<img src="../../assets/img/3.png">
<span>电影演出</span>
</li>
<li>
<img src="../../assets/img/3.png">
<span>景点/门票</span>
</li>
<li>
<img src="../../assets/img/3.png">
<span>周边/旅游</span>
</li>
<li>
<img src="../../assets/img/3.png">
<span>健身/游泳</span>
</li>
<li>
<img src="../../assets/img/3.png">
<span>跑腿</span>
</li>
<li>
<img src="../../assets/img/3.png">
<span>丽人/美发</span>
</li>
<li>
<img src="../../assets/img/3.png">
<span>医学美容</span>
</li>
<li>
<img src="../../assets/img/3.png">
<span>亲子/乐园</span>
</li>
<li>
<img src="../../assets/img/3.png">
<span>签到领奖</span>
</li>
<li>
<img src="../../assets/img/3.png">
<span>更多</span>
</li>
</ul>
</div>
</template>
<script>
export default {
}
}
</script>
<style>
</style>实现效果：
在navmenu.vue文件中实现图片的轮播图：
<template>
<div class="navmuen">
<van-swipe :autoplay="3000">
<van-swipe-item v-for="(image, index) in images" :key="index">
<img v-lazy="image" style="width:600px;height:150px;" />
</van-swipe-item>
</van-swipe>
</div>
</template>
<script>
import Vue from 'vue';
import { Lazyload } from 'vant';
Vue.use(Lazyload);
export default {
data(){
return{
images: [
require('@/assets/img/i1.png'),
require('@/assets/img/i2.png'),
require('@/assets/img/i3.png'),
require('@/assets/img/i4.png'),
],
}
}
}
</script>
<style>
</style>实现效果
最后在bander.vue文件中用的是css#的样式做出来的：没有用后端数据
<template>
<div id="main">
<div class="main-list">
<div class="main-img">
<img src="../../assets/img/p1.png">
</div>
<div class="main-item">
<div class="main-item">
<div class="main-module-1">
<h4>榴莲+烤鸡+培根+甄选+夏威夷+水果</h4>
</div>
<div class="main-module-2">
<b>4.8分</b>
<span>月销3435</span>
</div>
<div class="main-module-3">
<span>起送￥30</span>
<span class="express">免费配送</span>
<del>￥3.4</del>
</div>
<div class="main-module-4">
<span>
满50减9
</span>
</div>
</div>
</div>
</div>
<div class="main-list">
<div class="main-img">
<img src="../../assets/img/i2.png">
</div>
<div class="main-item">
<div class="main-item">
<div class="main-module-1">
<h4>榴莲+烤鸡+培根+甄选+夏威夷+水果</h4>
</div>
<div class="main-module-2">
<b>4.8分</b>
<span>月销3435</span>
</div>
<div class="main-module-3">
<span>起送￥30</span>
<span class="express">免费配送</span>
<del>￥3.4</del>
</div>
<div class="main-module-4">
<span>
满50减9
</span>
</div>
</div>
</div>
</div>
<div class="main-list">
<div class="main-img">
<img src="../../assets/img/i2.png">
</div>
<div class="main-item">
<div class="main-item">
<div class="main-module-1">
<h4>榴莲+烤鸡+培根+甄选+夏威夷+水果</h4>
</div>
<div class="main-module-2">
<b>4.8分</b>
<span>月销3435</span>
</div>
<div class="main-module-3">
<span>起送￥30</span>
<span class="express">免费配送</span>
<del>￥3.4</del>
</div>
<div class="main-module-4">
<span>
满50减9
</span>
</div>
</div>
</div>
</div>
<div class="main-list">
<div class="main-img">
<img src="../../assets/img/i1.png">
</div>
<div class="main-item">
<div class="main-item">
<div class="main-module-1">
<h4>榴莲+烤鸡+培根+甄选+夏威夷+水果</h4>
</div>
<div class="main-module-2">
<b>4.8分</b>
<span>月销3435</span>
</div>
<div class="main-module-3">
<span>起送￥30</span>
<span class="express">免费配送</span>
<del>￥3.4</del>
</div>
<div class="main-module-4">
<span>
满50减9
</span>
</div>
</div>
</div>
</div>
<div class="main-list">
<div class="main-img">
<img src="../../assets/img/p1.png">
</div>
<div class="main-item">
<div class="main-item">
<div class="main-module-1">
<h4>榴莲+烤鸡+培根+甄选+夏威夷+水果</h4>
</div>
<div class="main-module-2">
<b>4.8分</b>
<span>月销3435</span>
</div>
<div class="main-module-3">
<span>起送￥30</span>
<span class="express">免费配送</span>
<del>￥3.4</del>
</div>
<div class="main-module-4">
<span>
满50减9
</span>
</div>
</div>
</div>
</div>
<br><br><br>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>实现效果：
最终实现整体首页效果如下：
