vue+vant 移动端H5 商城项目

在这里插入图片描述

文章目录

- - - - 一、路由规划
      - 1. 新建路由配置
        2. 下载vue-router
        3. 路由注册
        4. 路由基础配置
        5. 路由挂载
        6. AppTabBar
        7.
      - 二、移动端首页
      - 2.1.首页效果
        2.2. 首页接口请求
        2.3. 首页页面
        2.4. 首页页面
      - 三、首页组件
      - 3.1. 轮播图SwiperCom
        3.2. Grid 居家-志趣组件
        3.3. 类别页组件
        3.4. 品牌制造商直供
        3.5. 品牌详情页
        3.6. 周一周四新品首发
        3.7. 人气推荐 top组件
        3.8. 专题精选TopicBox

技术选型

组件	版本	说明
vue	^2.6.11	数据处理框架
vue-router	^3.5.3	动态路由
vant	^2.12.37	移动端UI
axios	^0.24.0	前后端交互
amfe-flexible	^2.2.1	Rem 布局适配
postcss-pxtorem	^5.1.1	Rem 布局适配
less	^4.1.2	css编译
less-loader	^5.0.0	css编译
vue/cli	~4.5.0	项目脚手架

vue-cli + vant+ less +axios 开发

一、路由规划

项目路由规划配置
如果项目中所有的路由都写在入口文件中，那么将不便于编写项目和后期维护。因此路由需要进行模块化处理。

1. 新建路由配置

在src目录下创建router目录,该目录下新建index.js 用于编写路由配置

2. 下载vue-router

npm install vue-router

3. 路由注册

在index.js 文件中安装使用vue-router
router/index.js 内容：

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

4. 路由基础配置

在index.js文件中编写项目路由基础配置

List item
首页模块
专题模块
分类模块
购物车模块
我的模块

在这里插入图片描述
router/index.js 新增基础路由内容：

// 配置项目路由
const router = new VueRouter({routes: [{path: '/',redirect: '/home' // 重定向},{path: '/home', //首页name: 'Home',component: () => import('@/views/home/Home'),children: [ // 二级路由 不能加'/' 加'/'表示一级路由{path: 'searchPopup',component:  () => import('@/views/home/search/searchPopup.vue'),name: 'searchpopup',meta: {isshowtabbar: false},}],meta: {isShowTabbar: true}},{path: '/topic', //专题name: 'Topic',component: () => import('@/views/topic/Topic'),meta: {isShowTabbar: true}},{path: '/category', //分类name: 'Category',component: () => import('@/views/category/Category'),meta: {isShowTabbar: true}},{path: '/cart', //购物车name: 'Cart',component: () => import('@/views/cart/Cart'),meta: {isShowTabbar: true}},{path: '/user', //我的name: 'User',component: () => import('@/views/user/User'),meta: {isShowTabbar: true}},{path: '/productDetail', //产品详情name: 'ProductDetail',component: () => import('@/views/productdetail/ProductDetail')},{path: '/channel', // 产品分类页面（从首页类别点进去如 居家-餐厨-配件。。。 ）name: 'Channel',component: () => import('@/views/channel/Channel.vue')},{path: '/brand', // 品牌name: 'brand',component: () => import('@/views/brand/Brand.vue')},]
})export default router

5. 路由挂载

main.js： router 挂载到根实例对象上
根据路由配置，在src目录下的views 文件中，分别创建tabbar 对应的组件文件。

在main.js 文件中引入router 文件下的index.js 路由配置文件，并在根实例中注册。


// 在 入口文件mian.js 引入路由文件
import router from '@/router/index.js';
new Vue({render: h => h(App),router  // router 挂载到根实例对象上
}).$mount('#app')

6. AppTabBar

components /AppTabBar.vue
在这里插入图片描述
在components 文件中,创建一个AppTabBar.vue组件,配置底部tabbar,直接可以使用vant的tabbar组件

<template><div class="app-tab-bar"><!-- 下方导航 --><van-tabbarv-model="active"active-color="#ee0a24"inactive-color="#000"@change="onChange"shape="round"route><van-tabbar-item icon="home-o" to="/home">首页</van-tabbar-item><van-tabbar-item icon="label-o" to="/topic">专题</van-tabbar-item><van-tabbar-item icon="apps-o" to="/category">分类</van-tabbar-item><van-tabbar-item icon="shopping-cart-o" to="/cart">购物车</van-tabbar-item><van-tabbar-item icon="user-o" to="/user">我的</van-tabbar-item></van-tabbar></div>
</template>
<script>
export default {name: "app-tab-bar",data () {return {active:0}},methods: {onChange(m) {this.active = m},},
};
</script><style lang='less' scoped></style>

将AppTabBar.vue导入app.vue 跟组件

<template><div id="app"><!-- 路由对应的组件存放到router-view中--><router-view></router-view><!-- 底部tabbar 组件 --><AppTabBar v-show="$route.meta.isShowTabbar"></AppTabBar></div>
</template><script>
// 引入底部tabbar 组件
import AppTabBar from './components/AppTabBar.vue';export default {name: 'App',components: {AppTabBar,},
};
</script><style lang='less' scoped></style>

7.

在这里插入图片描述

二、移动端首页

2.1.首页效果

在这里插入图片描述
首页展示的数据

2.2. 首页接口请求

http.js文件中的接口请求

//1. 首页 Home
// 获取首页数据列表
export function getIndexList() {return instance.get('/index/index')
}

2.3. 首页页面

home/home.vue
在这里插入图片描述

2.4. 首页页面

<template><div class="home"><!-- 二级路由坑 --><router-view v-if="$route.path === '/home/searchPopup'"></router-view><main v-else><!--搜索框 --><van-searchshape="round"v-model="value"show-actionplaceholder="请输入搜索关键词"@search="onSearch"@cancel="onCancel"@click="$router.push('/home/searchPopup')"/><!-- 轮播图 --><SwiperCom :banner="banner"></SwiperCom><!-- grid 居家-志趣组件 --><Grid :channel="channel"></Grid><!-- 品牌制造商直供  --><Support :brandList="brandList"></Support><!-- 周一周四新品首发 --><Weekproduct:newGoodsList="newGoodsList"title="周一周四新品首发"></Weekproduct><!-- 人气推荐 top组件 --><!-- v-if 保证了有数据才渲染该组件，等渲染该组件的时候，才执行该组件的生命周期函数--><Top :hotGoodsList="hotGoodsList" v-if="hotGoodsList.length>0"></Top><!-- 专题精选 --><TopicBox :topicList="topicList" title="专题精选"></TopicBox><!-- 产品列表 --><Weekproductv-for="item in categoryList":key="item.id":newGoodsList="item.goodsList":title="item.name"></Weekproduct></main></div>
</template><script>
// 导入轮播图组件
import SwiperCom from "@/components/SwiperCom";
import { getIndexList } from "@/https/http.js";
// 引入 grid  居家-志趣组件
import Grid from "@/views/home/Grid";
// 引入support 组件-品牌制造商直供
import Support from "@/views/home/Support";
import Weekproduct from "@/views/home/Weekproduct";
import TopicBox from "@/views/home/TopicBox";
import Top from '@/views/home/Top'
export default {name: "home",data() {return {value: "",banner: [],  //轮播图channel: [],  //居家-志趣数据brandList: [],  // 品牌制造商数据newGoodsList: [],  // 周一周四新品首发数据hotGoodsList:[],  // 人气推荐topicList: [],  // 专题精选categoryList: []  //产品列表};},components: {SwiperCom,Grid,Support,Weekproduct,TopicBox,Top,},created() {// 发送请求，获取数据getIndexList().then((res) => {console.log("res", res);this.banner = res.data.banner;this.channel = res.data.channel;this.brandList = res.data.brandList;this.newGoodsList = res.data.newGoodsList;this.topicList = res.data.topicList;this.categoryList = res.data.categoryList;this.hotGoodsList = res.data.hotGoodsList;});},methods: {onSearch() { },onCancel() { },},
};
</script><style lang="less" scoped>
.home {padding-bottom: 100px;box-sizing: border-box;
}
</style>

三、首页组件

3.1. 轮播图SwiperCom

在这里插入图片描述

<template><!-- 轮播图 --><div class="swiper-com"><van-swipe class="my-swipe" :autoplay="1000" indicator-color="white"><van-swipe-item v-for="item in banner" :key="item.id" ><img :src="item.image_url" alt=""></van-swipe-item></van-swipe></div>
</template><script>
export default {name:'swiper-com',props:['banner'],}
</script><style lang="less" scoped>.swiper-com{width: 100%;img{width: 100%;}}
</style>

3.2. Grid 居家-志趣组件

在这里插入图片描述

<template><div class="gird"><van-grid :column-num="5" channel.length><van-grid-itemv-for="item in channel":key="item.id":icon="item.icon_url":text="item.name"@click="btn(item.id)"/></van-grid></div>
</template><script>
export default {name: "gird",props: ["channel"],methods: {btn(id){this.$router.push({path: '/channel', query:{id: id}})}}
};
</script><style>
</style>

3.3. 类别页组件

在这里插入图片描述
Channel.vue

<template><div class="channel-box"><van-tabs sticky @change="changeFn"><van-tab v-for="item in brotherCategory" :key="item.id" :title="item.name" ><h4>{{ item.name }}</h4><p>{{ front_desc }}</p><!-- 产品列表 --><Products :goodsList="goodsList" /></van-tab></van-tabs></div>
</template><script>
import { GetCateGoryData, GetCateGoryList } from "@/https/http";
import Products from "@/components/Products";export default {name: "channel",data() {return {id_: "0", // 当前类别的idpage: 1, // 当前页数size: 1000, //每页显示条数brotherCategory: [], // 分类数组goodsList: [], //当前类别对应的商品列表front_desc: "",};},created() {this.id_ = this.$route.query.id;this.getCategoryData();  //获取所有分类数据this.getCategoryListData();  //获取当前类别对应的产品数组}, methods: {//获取所有分类数据getCategoryData() {GetCateGoryData({ id: this.id_ }).then((res) => {this.brotherCategory = res.data.brotherCategory; // 全部分类数组this.currentCategory = res.data.currentCategory; // 当前分类对象this.front_desc = this.currentCategory.front_desc; // 当前类别文字描述});},//获取当前类别对应的产品数组getCategoryListData() {GetCateGoryList({categoryId: this.id_,page: this.page,size: this.size,}).then((res) => {console.log(33, res);if (res.errno == 0) {this.goodsList = res.data.goodsList;}});},// / 切换分类changeFn(title, name) {// title 下标// name: 分类标题this.brotherCategory.forEach((item) => {if (item.name == name) {this.id_ = item.id;}});this.getCategoryListData();this.getCategoryData();},},components: {Products,},
};
</script><style lang="less" scoped>
.channel-box {text-align: center;font-size: 16px;line-height: 40px;p {color: #666;}
}
</style>

3.4. 品牌制造商直供

在这里插入图片描述

<template><div class="support"><ul><li v-for="item in brandList" :key="item.id" @click="clickFn(item.id)"><img :src="item.pic_url" alt=""><h4>{{item.name}}</h4><p>{{item.floor_price|moneyFlrmat}}</p></li></ul></div>
</template><script>
export default {name:'support',props:['brandList'],methods: {clickFn(id){this.$router.push({path:'/brand', query:{id: id}})}}
}
</script><style lang="less" scoped>.support>ul{width: 100%;display: flex;justify-content: space-between;flex-wrap: wrap;li{width: 49%;position: relative;img{width: 100%;}h4 {font-size: 16px;position: absolute;left: 20px;top: 30px;}p {font-size: 15px;position: absolute;left: 30px;top: 60px;color: red;}}}
</style>

3.5. 品牌详情页

在这里插入图片描述

<template><div class="brand-box"><h4>{{ name }}</h4><img :src="list_pic_url" alt="" /><p>{{ simple_desc }}</p></div>
</template><script>
import { GetBrandList } from '@/https/http'
export default {name: 'brand',data() {return {name: '',simple_desc: '',list_pic_url: '',page: 1,size: 1000,}},created() {this.getBrandData()},methods: {// 发送请求，获取品牌详情页数据getBrandData() {GetBrandList({ id: this.$route.query.id }).then((res) => {console.log(res);this.name = res.data.brand.namethis.simple_desc = res.data.brand.simple_descthis.list_pic_url = res.data.brand.list_pic_url})},}
}
</script><style lang="less" scoped>
.brand-box {text-align: center;font-size: 16px;line-height: 40px;img {width: 100%;}
}
</style>

3.6. 周一周四新品首发

在这里插入图片描述

<template><div class="week-product"><div class="mytitle"><span></span><h3>{{ title }}</h3></div><ul><li v-for="item in newGoodsList" :key="item.id" @click="clickFn(item.id)"><img :src="item.list_pic_url" alt="" /><p>{{ item.name }}</p><p>{{ item.retail_price }}</p></li></ul></div>
</template><script>
export default {name: 'week-product',props: ['newGoodsList', 'title'],methods: {clickFn(id) {this.$router.push({ path: '/productDetail', query: { id: id } })}}
}
</script><style lang="less" scoped>
.week-product {.mytitle {text-align: center;font-size: 16px;margin-top: 20px;position: relative;height: 50px;span {width: 50%;height: 2px;background-color: #ccc;display: inline-block;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}h3 {width: 30%;background-color: #fff;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}}ul {display: flex;justify-content: space-between;flex-wrap: wrap;li {width: 49%;img {width: 100%;}p {text-align: center;font-size: 16px;}}}
}
</style>

3.7. 人气推荐 top组件

在这里插入图片描述

<template><div class="top-box"><h3>人气推荐</h3><div class="content" v-for="item in hotGoodsList" :key="item.id"><van-card:key="item.id":price="item.retail_price":desc="item.goods_brief":title="item.name":thumb="item.list_pic_url"@click="clickFn(item.id)"/></div></div><!-- v-for="item in hotGoodsList -->
</template><script>
export default {name: 'top',props: ['hotGoodsList'],created() {console.log(555, this.hotGoodsList);},methods: {clickFn(id) {this.$router.push({ path: '/productDetail', query: { id: id } })}}
}
</script><style lang="less" scoped>
.top-box {h3 {font-size: 22px;line-height: 60px;text-align: center;}
}
</style>

3.8. 专题精选TopicBox

在这里插入图片描述

<template><div class="topic"><h3>{{ title }}</h3><van-swipe class="my-swipe" :autoplay="1000" indicator-color="white"><van-swipe-itemv-for="item in topicList":key="item.id"><img :src="item.item_pic_url" alt="" /><p>{{ item.title }}</p><p>{{ item.subtitle }}</p></van-swipe-item></van-swipe></div>
</template><script>
export default {name: 'topic',props: ['topicList', 'title'],}
</script><style lang="less" scoped>
.topic {width: 100%;text-align: center;font-size: 16px;h3 {font-size: 22px;line-height: 60px;text-align: center;}.my-swipe {display: flex;img {width: 100%;height: 200px;}}
}
</style>