在vue脚手架环境利用vant组件简单实现移动端购物商城系统

用vue脚手架创建好项目，进行以下操作
①下载vant插件
在终端或cmd中运行

npm i vant -S

在main.js中全局配置vant

import Vant from 'vant';
import 'vant/lib/index.css';Vue.use(Vant);

②下载安装axios
在终端或cmd中运行

npm install axios -S

在main.js中全局配置axios

import axios from 'axios'
Vue.prototype.$axios = axios

③在views中创建Carts.vue(购物车页面)，Classify.vue(商品分类)，Goodslist.vue(商品列表),Index.vue,Main.vue(首页),Myself.vue(我的),Search.vue(搜索页面)

④在router下的index.js配置路由

const routes = [{path: '/',name: 'Index',component: () => import( '../views/Index.vue'),redirect:'/main',children:[{path: '/main',name: 'Main',component: () => import( '../views/Main.vue')},{path: '/classify',name: 'Classify',component: () => import( '../views/Classify.vue')},{path: '/carts',name: 'Carts',component: () => import( '../views/Carts.vue')},{path: '/myself',name: 'Myself',component: () => import( '../views/Myself.vue')},]},{path: '/search',name: 'Search',component: () => import( '../views/Search.vue')},{path: '/list',name: 'Goodlist',component: () => import( '../views/Goodlist.vue')
}]

⑤App.vue

<template><div><router-view></router-view></div>
</template>

⑥Index.vue

<template><div><router-view></router-view><van-tabbar  route active-color="#1989fa" ><van-tabbar-item  name="home" icon="home-o" to='/main'>首页</van-tabbar-item><van-tabbar-item  name="home" icon="search" to="/classify" badge="2">分类</van-tabbar-item><van-tabbar-item name="home" icon="cart-o" to="/carts" :dot='true'>购物车</van-tabbar-item><van-tabbar-item name="home" icon="manager-o" to="/myself">我的</van-tabbar-item></van-tabbar></div>
</template><script>export default {data(){return {active:0}}
}
</script><style></style>

⑦Main.vue （首页）

<template><div><!-- 输入搜索框 --><van-searchv-model="value"show-actionshape="round"placeholder="请输入搜索关键词"background="#E73A68"@focus="searchFocus"><template #label><span class="search-logo">JD</span></template><template #action><span style="color:#fff;font-size:16px;">登录</span></template><template #left><van-icon name="wap-nav" color="#fff" size="25px" style="margin-right:10px" /></template></van-search><!-- 轮播广告 --><div><van-swipe :autoplay="3000"  style="width:90%;margin:15px auto;border-radius:10px" indicator-color="red" ><van-swipe-item v-for="url in images" :key="url"><img  :src="url" style="width:100%" /></van-swipe-item></van-swipe></div><!-- 宫格 --><van-swipe :autoplay="3000" :loop="false" style="padding:10px 0"><van-swipe-item><van-grid :column-num="5" :border="false"><van-grid-item v-for="(item,index) in imgData" :key="index"  :text="item.title" v-show="index < 10"><template #icon><img :src="item.img" width="50px" /></template></van-grid-item></van-grid>   </van-swipe-item><van-swipe-item><van-grid :column-num="5" :border="false"><van-grid-item v-for="(item,index) in imgData" :key="index"  :text="item.title" v-show="index >= 10 && index < 20"><template #icon><img :src="item.img" width="50px" /></template></van-grid-item></van-grid>   </van-swipe-item></van-swipe><!-- 商品卡片 --><div class="card-list"><goodscard v-for="i in 4" :key="i" img='/images/wise.jpg' title="面膜" :price='80'></goodscard></div></div>
</template><script>
import Goodscard from '@/components/Goodscard.vue'
export default {components:{'goodscard' : Goodscard},data(){return {value:'',images:['/images/01.jpg','/images/02.jpg','/images/03.jpg'],imgData:[{title:'京东数码',img:'/images/grid01.png'},{title:'京东超市',img:'/images/grid02.png'},{title:'京东服饰',img:'/images/grid03.png'},{title:'京东数码',img:'/images/grid01.png'},{title:'京东超市',img:'/images/grid02.png'},{title:'京东服饰',img:'/images/grid03.png'},{title:'京东数码',img:'/images/grid01.png'},{title:'京东超市',img:'/images/grid02.png'},{title:'京东服饰',img:'/images/grid03.png'},{title:'京东数码',img:'/images/grid01.png'},{title:'京东超市',img:'/images/grid02.png'},{title:'京东服饰',img:'/images/grid03.png'},{title:'京东数码',img:'/images/grid01.png'},{title:'京东超市',img:'/images/grid02.png'},{title:'京东服饰',img:'/images/grid03.png'},{title:'京东数码',img:'/images/grid01.png'},{title:'京东超市',img:'/images/grid02.png'},{title:'京东服饰',img:'/images/grid03.png'},{title:'京东数码',img:'/images/grid01.png'},{title:'全部',img:'/images/grid02.png'}]}},methods:{searchFocus(){this.$router.push({path:'/search'})}}
}
</script><style>
.search-logo{color: #E93C3E;font-weight: bold;font-size: 20px;
}
.card-list{width: 100%;display: flex;justify-content: space-around;box-sizing: border-box; flex-wrap: wrap; margin-bottom: 60px;
}
</style>

⑧Search.vue（搜索页面）

<template><div><van-searchv-model="searchValue"shape="round"show-actionplaceholder="请输入搜索关键词"@search='onSearch'><template #action><van-button type="primary" size="mini" color="#E93B3D" style="font-size:16px;border-radius:5px" @click="onSearch">搜索</van-button></template><template #left><van-icon  name="arrow-left" size="20px" style="margin-right:10px" @click="pageBack"/></template></van-search><!-- 搜索记录 --><div class="search-history"><div class="search-history-title"><span>最近搜索</span><van-icon name="delete" size="20px" @click="clearHistory"/></div><div class="search-tag-list"><van-tag type="large" color="#F0F2F5" class="search-tag" v-for="(item,index) in historyList" :key="index" @click="onSearch(item)">{{item}}</van-tag></div></div><!-- 智能搜索提示 --><div class="showList" v-show="showKwList" ><van-cell v-for="kw in showTist" :key="kw" :title="kw" value='内容' @click="onSearch(kw)" /></div></div>
</template><script>
export default {data(){return {searchValue:'',showTist:[],showKwList:false,historyList:[],data: ["html","css","javascript","jquery","node.js","vue.js","swiper","bootstrap","php","mongodb","mysql","react.js","github","glup","webpack","sass","echarts","vant"]}},created(){let historylist = localStorage.historyListif(historylist){this.historyList = JSON.parse(historylist)}},watch:{searchValue(kw){this.showKwList = kw.length > 0 ? true : falsethis.showTist = this.data.filter(item=>{return item.includes(kw)})}},methods:{pageBack(){window.history.back()},onSearch(kw){let keyword = ''if(typeof kw === 'string'){keyword = kw}else if(typeof kw === 'object'){if(this.searchValue.trim() === '') returnkeyword = this.searchValue}if(keyword){//执行搜索功能this.$router.push({path:'/list',query:{kw : keyword}})}//query类似于get请求，params类似于post请求//如果路由跳转使用path，必须使用query方式传参，如果使用name跳转，query和params可以//使用query传参，参数可以保存，使用params传参，页面刷新后，参数不会保存// this.$router.push({//     name:'/list',//     params:{//         kw : keyword//     }// })//保存搜索记录if(keyword){this.saveHistory(keyword)}},saveHistory(keyword){if(this.historyList.includes(keyword)){let index = this.historyList.indexOf(keyword)this.historyList.splice(index,1)this.historyList.unshift(keyword)}else{this.historyList.unshift(keyword)}if(keyword){//更新到本地localStorage.historyList = JSON.stringify(this.historyList)}},clearHistory(){this.$dialog.confirm({title: '',message:'确定要清空吗',closeOnClickOverlay:'true',width:'360px',className:'confiButton',theme:'round'}).then(() => {this.historyList = []localStorage.historyList = JSON.stringify(this.historyList)}).catch(() => {// on cancel})}}
}
</script><style>.search-history{height: 50px;width: 100%;border-top: 1px solid #E5E5E5;}.search-history-title{height: 50px;display: flex;justify-content: space-between;align-items: center;padding: 0 10px;}.search-tag-list{padding-left: 15px;padding-right: 15px;}.search-tag{color: #686868;margin-top: 10px;margin-right: 10px;}.showList{background: #fff;position: absolute;width: 100%;top: 67px;min-height: 150px;}.confiButton{font-size: 22px;}
</style>

⑨Classify.vue(分类页面)

<template><div><div class="navBox"><ul class="firstNav"><li v-for="(item) in nav" :key="item.cid" @click="clickNavOne(item)"><img :src="item.cpic" alt="" srcset="" width="30px">{{item.cname}}</li></ul><ul class="secondNav"><li v-for="(item) in secondData" :key="item.subcid"  @click="toListPage"><img :src="item.scpic" alt="" srcset="" width="50px">{{item.subcname}}</li></ul></div></div>
</template><script>
import axios from 'axios'
export default {data(){return {nav:[],secondData:[]}},created(){this.$axios.get('/data/goods.json').then((res)=>{console.log(res.data.data.data)this.nav = res.data.data.datathis.secondData = this.nav[0].subcategories})},methods:{clickNavOne(item){this.secondData = item.subcategories},toListPage(){this.$router.push({path:'/list'})}}
}
</script><style scoped>
.navBox{display: flex;
}
.firstNav{margin: 0 20px;flex: 1.5;margin-bottom: 50px;overflow-y: scroll;
}
::-webkit-scrollbar{display: none;
}
.secondNav{flex: 3;display: flex;align-items: center;flex-wrap: wrap;margin-bottom: 50px;height: 600px;overflow-y: scroll;margin-top: 10px;
}
::-webkit-scrollbar{display: none;
}
.firstNav li{display: flex;flex-direction: column;justify-content: center;margin: 20px 10px;
}
.secondNav li{display: flex;flex-direction: column;justify-content: center;width: 50%;
}</style>

⑩Goodlist.vue(商品列表页面)

<template><div><!-- 导航栏 --><van-nav-bar:title="`购物车(${this.cartList.length})`"left-text="返回"right-text="购物车"left-arrowfixed@click-left="onClickLeft"@click-right="onClickRight"style="height:50px;font-size:26px"></van-nav-bar><div class="goods-card-box"><!-- 商品列表 --><goods-card v-for="(item) in goods" :key="item.id" :img="item.mainPic" :title="item.title":price="item.actualPrice"@click="addCart(item)"class="goodlist-li"></goods-card></div></div>
</template><script>
import Goodscard from '@/components/Goodscard'
export default {components:{'goods-card' : Goodscard},data(){return {goods:[],cartList:[]}},watch:{cartList : {handler(list){localStorage.cartList = JSON.stringify(list)},deep:true}},created(){//获取数据this.$axios.get('/data/list.json').then((res)=>{console.log(res.data.data.data.list)this.goods = res.data.data.data.list})//将内存展示到页面上if(localStorage.cartList){this.cartList = JSON.parse(localStorage.cartList)}},methods:{onClickLeft() {window.history.back()shiyu},onClickRight() {this.$router.push({path:'/carts'})},//加入购物车addCart(item){console.log(item)let double = falsethis.cartList.map((cart)=>{if(cart.good.id == item.id){cart.num++double = truereturn}})if(!double){this.cartList.push({good:item,num:1})}}}
}
</script><style scoped>
.goods-card-box{display: flex;flex-wrap: wrap;justify-content: space-between;margin-top: 50px;}
.goodlist-li{margin: 10px 1px;border: 1px solid #eee;border-radius: 5px;
}</style>

11.Carts.vue(购物车)

<template><div><!-- 导航栏 --><van-nav-bartitle="购物车"left-text="返回"fixedleft-arrow@click-left="onClickLeft"/><!-- 商品卡片 --><van-checkbox-group v-model="result" style="margin-bottom:120px;margin-top:60px"><div v-for="item in cartList" :key="item.good.id"><van-checkbox :name="item"></van-checkbox><van-swipe-cell><van-cardtag="标签":price="item.good.actualPrice":desc="item.good.desc":title="item.good.title":thumb="item.good.mainPic":origin-price="item.good.originalPrice"style="margin:10px 5px"><template #num><van-stepper v-model="item.num" /></template></van-card><template #right><van-button square text="删除" type="danger" class="delete-button" @click="del(item)" /></template></van-swipe-cell></div></van-checkbox-group><!-- 提交订单栏 --><van-submit-bar :price="totalPrice" button-text="提交订单"><van-checkbox v-model="sellAll" @click="handlSellAll">全选</van-checkbox><template #tip>你的收货地址不支持同城送, <span>修改地址</span></template></van-submit-bar></div>
</template><script>
export default {data(){return {sellAll:false,cartList:[],result:[],totalPrice:0}},watch:{cartList:{handler(list){localStorage.cartList = JSON.stringify(list)},deep:true},result:{handler(list){if(list.length == this.cartList.length){this.sellAll = true}else{this.sellAll = false}this.comtalPrice()},deep:true}},methods:{del(item){console.log(item)console.log(item.good)this.cartList.splice(item.good,1)},onClickLeft(){window.history.back()},handlSellAll(){if(this.sellAll){this.result = this.cartList}else{this.result = []}},comtalPrice(){let totalPrice = 0this.result.map((item)=>{totalPrice += item.good.actualPrice * item.num})this.totalPrice = totalPrice * 100}},created(){if(localStorage.cartList){this.cartList = JSON.parse(localStorage.cartList)}},}
</script><style scoped>.delete-button {height: 100%;}
</style>

12.Myself.vue(我的)

<template><div>我的</div>
</template><script>
export default {}
</script><style></style>

在vue脚手架环境利用vant组件简单实现移动端购物商城系统相关推荐

vant组件库适配pc端
今天遇到的一个问题就是:利用vant组件本地开发时,使用van-search发现清除按钮失效.官方解释是:Vant 是一个面向移动端的组件库,因此默认只适配了移动端设备,这意味着组件只监听了移动端的 ...
Java中利用socket实现简单的服务端与客户端的通信（中级）——实现任意双向通信
本文计划采用socket实现客户端和服务端的任意双向通信,即客户端可以随时给服务端发消息,服务端也可以随时给客户端发消息,最终结果就是一个类似与QQ的聊天软件的功能. 以下代码可以直接拷贝到Eclip ...
Java中利用socket实现简单的服务端与客户端的通信（基础级）
在上一篇文章中,简单的介绍了java中入门级的socket编程,简单的实现了客户端像服务器端发送数据,服务器端将数据接收并显示在控制台,没有涉及多线程.上一篇文章的链接:Java中利用socket实现 ...
【014】基于Vue.js的移动端购物商城网站(含源码、课设报告)
文章目录一.项目介绍二.代码及报告获取一.项目介绍基于Vue.js的移动端购物商城网站(含源码.课设报告),代码获取放在文末了,码字不易,感谢点赞~ 一.系统概述本部分主要是对项目进行简要描 ...
Java基于springboot+vue的汽车饰品销售购物商城系统前后端分离
开发背景随着我国科技和经济的发展,我国的汽车数量也越来越多,基本家家户户都拥有了自己的汽车,为了让汽车用起来更加的舒心,于是各类琳琅满目的汽车饰品也出现了.大多数时候人们在购买汽车饰品的时候都回到这 ...
SpringBoot+Vue服装购物商城系统
简介:本项目采用了基本的SpringBoot+Vue设计的服装购物商城系统.详情请看主要截图.经测试,本项目正常运行.本项目适用于Java毕业设计.课程设计学习参考等用途. 项目描述项目名称 Spr ...
android订餐系统app、android购物商城系统app 手机端+服务器端 mysql数据库，界面简单，功能齐全安卓购物商城安卓在线订餐系统
android订餐系统app.android购物商城系统app 一.简介该项目可作为毕业设计开发使用,包含项目源代码.数据库.开题报告.毕业论文.答辩ppt等. 毕业设计题目:"基于And ...
html页面如何按需导入vant,vue脚手架中使用Vant，实现自动按需引入组件，并将px转换为rem...
偶然间看到一款不错的移动端vue组件库Vant,照着官方文档敲了一下,感觉还是不错的.想着以后的项目中可能会运用到,特此记录下,方便之后使用. 现在很多的组件库为了减小代码包体积,都支持按需加载了.V ...
搭建Vue.js环境，建立一个简单的Vue项目
基于vue-cli快速构建 Vue是近年来比较火的一个前端框架,所以搭建Vue.js环境,要装webpack,vue-cli,Vue 安装webpack命令如下 $ cnpm install webp ...

在vue脚手架环境利用vant组件简单实现移动端购物商城系统

在vue脚手架环境利用vant组件简单实现移动端购物商城系统相关推荐

最新文章

热门文章