前端商城vue项目案例1

views/home.vue

<template><div id="home" class="home"><van-search v-model="value" placeholder="商品搜索 共239款好物" input-align="center"/><van-swipe :autoplay="3000" style="width:100%;height:200px"><van-swipe-item v-for="(image, index) in images" :key="index"><img v-lazy="image.image_url" style="width: 100%;height: 200px"/></van-swipe-item></van-swipe><van-grid :column-num="5"><van-grid-item v-for="(item,index) in channel" :key="index" :icon="item.url" :text="item.name" /></van-grid><div class="brandlist"><van-panel title="品牌制造商"><van-grid :column-num="2"><van-grid-item v-for="(item1,index1) in brandList" :key="index1"><img :src="item1.new_pic_url" style="width: 100%; height:100%;display: block"/><h4 class="title">{{item1.name}}</h4><p class="desc">{{item1.floor_price}}元起</p></van-grid-item></van-grid></van-panel></div><div class="newlist"><van-panel title="食品好吃货"><van-grid :column-num="2"><van-grid-item v-for="(item2,index2) in newGoodsList" :key="index2"><img :src="item2.list_pic_url" style="width: 100%; height:100%;display: block"/><h4 class="title1">{{item2.name}}</h4><p class="desc1">{{item2.retail_price}}元起</p></van-grid-item></van-grid></van-panel></div><div class="personlist"><van-panel title="人气"><van-card  v-for="(item3,index3) in hotGoodsList" :key="index3":price="item3.retail_price":desc="item3.goods_brief":title="item3.name":thumb="item3.list_pic_url"/></van-panel></div><div style="height: 50px"></div><van-tabbar v-model="tabActive"><van-tabbar-item icon="wap-home">首页</van-tabbar-item><van-tabbar-item icon="bookmark">分类</van-tabbar-item><van-tabbar-item icon="shopping-cart">购物车</van-tabbar-item><van-tabbar-item icon="column">专题</van-tabbar-item><van-tabbar-item icon="manager">我的</van-tabbar-item></van-tabbar></div>
</template><script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import axios from 'axios'
import api from '../assets/config/api'
import Vue from 'vue';
import { Swipe, SwipeItem } from 'vant';
import { Lazyload } from 'vant';
import { Panel } from 'vant';
import { Grid, GridItem } from 'vant';
import { Card } from 'vant'
import { Tabbar, TabbarItem } from 'vant';
Vue.use(Tabbar);
Vue.use(TabbarItem);
Vue.use(Panel);
Vue.use(Card);
Vue.use(Grid);
Vue.use(GridItem);
Vue.use(Swipe);
Vue.use(SwipeItem);Vue.use(Lazyload);
export default {name: 'Home',components: {HelloWorld},data(){return{value:'',data:{},tabActive:0}},/*将钩子函数的数据放到计算,通过计算方法计算出来*/computed:{images() {if(typeof this.data.banner=='object'){return this.data.banner}else{return []}},channel(){if(typeof this.data.channel=='object'){return this.data.channel}else{return []}},brandList(){if(typeof this.data.brandList=='object'){return this.data.brandList}else{return []}},newGoodsList(){if(typeof this.data.newGoodsList=='object'){return this.data.newGoodsList}else{return []}},hotGoodsList(){if(typeof this.data.hotGoodsList=='object'){return this.data.hotGoodsList}else{return []}}},async mounted() {let res = await axios.get(api.IndexUrl)console.log(res.data)this.data = res.data.data}
}
</script>
<style>.brandlist .van-grid-item__content{padding: 0px !important;}.title{position: absolute;top: 20px;left: 10px;}.desc{position: absolute;top: 50px;left: 10px;font-size: 14px;color: #999;}.title1{position: absolute;bottom: 0;width: 90%;white-space: nowrap;text-overflow:ellipsis;overflow: hidden;}.desc1{position: absolute;font-size: 14px;color: #999;bottom: -10px;}.brandlist img{border: 1px solid #fff;}.personlist .van-card__price{color: red !important;}.personlist .van-card__content{text-align:left;justify-content: center;align-content: center;}.personlist .van-card__title{font-weight: 900;color: #333;font-size: 14px;padding: 5px 0;}
</style>

mian.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import { Search } from 'vant';
import 'vant/lib/index.css'
Vue.use(Search);Vue.config.productionTip = falsenew Vue({router,store,render: h => h(App)
}).$mount('#app')

前端商城vue项目案例1相关推荐

【Vue基础】前端工程化Vue项目
一.创建Vue项目步骤 1.新建一个文件夹,起名为vue_project01 2.在该文件夹中打开cmd,输入指令vue ui,打开图形化界面 3.此时跳转到网页,根据以下步骤配置vue项目 1)项目 ...
【前端】Vue项目：旅游App-博客总结
博客链接 [前端]Vue项目:旅游App-(1)搭建项目.重置css.配置router和store(pinia) https://blog.csdn.net/karshey/article/deta ...
【前端】Vue项目：旅游App-（22）detail：房屋信息、房屋设施、插槽
文章目录目标过程与代码房屋信息部分info 相似结构的组件section 房屋设施facility 效果总代码修改或添加的文件 detail-section detail-facility ...
【前端优化 Vue项目优化】如何避免浏览器卡顿，实现性能优化cdn？
提示:前端查漏补缺,仅代表个人观点. 文章目录一.前言二.前端优化方法 1. 减少请求,压缩文件 2. CSS和JavaScript管理 3. 设置内容缓存 4. 减少页面重定向 5. CDN网络 ...
转发：11个web前端开发实战项目案例+源码！拿走就是了
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/weixin_43793782/arti ...
微前端在Vue项目的实践
文章的参考:微前端在美团外卖的实践我将讲解微前端如何在Vue项目中实践和应用,业务逻辑参考文中介绍的,文章中介绍的逻辑比较清晰,但是并没有提供过多的业务代码,对微前端如何应用到具体的项目我们就无从而 ...
[适合前端新手vue项目]超级可爱的宠物APP
[适合前端新手项目]超级可爱的宠物APP > < 基于网上找的UI设计图,实现简单的移动端静态页面:利用VUE框架进行管理:Mock实现模拟数据:添加了token登录和注册功能本项目用到 ...
前端监控--vue项目中使用友盟统计监控
在项目的使用过程中,不可避免的会出现各种奇奇怪怪的报错,有的可能会导致项目程序崩溃无法运行,但是我们作为开发人员是不会立刻知道这种突发情况的,所以我们需要搜集程序的报错信息,及时解决错误,提高项目的稳 ...
前端开发Vue项目实战：电商后台管理系统（一）前后端搭建
目录 1. 项目概述 2. 前端项目初始化步骤 3. 后台项目的环境安装配置下载安装phpStudy,添加数据库 Postman测试工具验证 1. 项目概述电商项目基本业务概述: 根据不同的应用 ...
【前端】Vue项目开发流程
项目初始化安装Vue 脚手架 npm install -g @vue/cli 通过Vue脚手架创建项目 vue ui i.创建-选择路径; ii.输入项目名称-git初始化信息; iii.预设(手动 ...

前端商城vue项目案例1

前端商城vue项目案例1相关推荐

最新文章

热门文章