Vue项目首页-热销推荐组件开发（7-6）

热销推荐组件开发

创建分支

在项目目录下右键打开gitbase。
git pull //从线上将项目拉下来。
git checkout index-recommend //进入index-recommend这个分支
git status //查看本地分支

引入并注册即可。

<template><div><div class="title">热销推荐</div><ul><liclass="item border-bottom"v-for="item of recommendList":key="item.id"><img class="item-img" :src="item.imgUrl" /><div class="item-info"><p class="item-title">{{item.title}}</p><p class="item-desc">{{item.desc}}</p><button class="item-button">查看详情</button></div></li></ul></div>
</template><script>
export default {name: 'HomeRecommend',data () {return {recommendList: [{id: '0001',imgUrl: 'http://img1.qunarzz.com/sight/p0/201404/23/04b92c99462687fa1ba45c1b5ba4ad77.jpg_140x140_73fda71d.jpg',title: '大连圣亚海洋世界',desc: '浪漫大连首站，浪漫的海洋主题乐园'}, {id: '0002',imgUrl: 'http://img1.qunarzz.com/sight/p0/201404/23/04b92c99462687fa1ba45c1b5ba4ad77.jpg_140x140_73fda71d.jpg',title: '大连圣亚海洋世界',desc: '浪漫大连首站，浪漫的海洋主题乐园'}, {id: '0003',imgUrl: 'http://img1.qunarzz.com/sight/p0/201404/23/04b92c99462687fa1ba45c1b5ba4ad77.jpg_140x140_73fda71d.jpg',title: '大连圣亚海洋世界',desc: '浪漫大连首站，浪漫的海洋主题乐园'}]}}
}
</script><style lang="stylus" scoped>@import '~styles/mixins.styl'.titlemargin-top: .2remline-height: .8rembackground: #eeetext-indent: .2rem.itemoverflow: hiddendisplay: flexheight: 1.9rem.item-imgwidth: 1.7remheight: 1.7rempadding: .1rem.item-infoflex: 1padding: .1rem.item-titleline-height: .54remfont-size: .32remellipsis().item-descline-height: .4remcolor: #cccellipsis().item-buttonline-height: .44remmargin-top: .16rembackground: #ff9300padding: 0 .2remborder-radius: .06remcolor: #fff
</style>

Vue项目首页-热销推荐组件开发（7-6）相关推荐

Vue项目部署及使用WebStorm开发Vue
Vue项目部署及使用WebStorm开发Vue Vue项目部署搭建Vue环境新建Vue项目使用WebStorm开发Vue WebStorm相关配置配置路由全局页面App.vue 全局引入组件 ...
六十四、Vue项目去哪儿网App开发准备
2020/10/20 . 周二.今天又是奋斗的一天. @Author:Runsen @Date:2020/10/20 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是 ...
Vue项目中公用footer组件底部位置的适配问题
vue项目中公用footer组件底部位置的适配问题需求: footer为公用组件,其他页面都需要引入,这是会存在一种情况:有的页面高度很高,footer组件要放在内容的最后:有的页面内容很少,高度很 ...
【Vue-router中，require代替import解决vue项目首页加载时间过久】
vue-router中,require代替import解决vue项目首页加载时间过久的问题 - 雨打芭蕉wt - 博客园
Vue项目首页_热销推荐组件、周末游组件开发
热销推荐效果: 新建Recommend.vue: <template><div><div class="title">热销推荐</div& ...
六十七、完成Vue项目首页图标区域布局和逻辑实现
2020/10/23. 周五.今天又是奋斗的一天. @Author:Runsen @Date:2020/10/23 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是共 ...
基于Vue.js的后台管理系统组件开发
什么是Vue Vue.js 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合. ...
iframe js 加载失败_如何提高Vue项目首页的加载速度
为何当一个VUE项目过大时,打包之后初次访问首页加载速度会异常的缓慢,是什么原因导致以及如何解决这些问题? 首页打开速度慢的原因其实浏览器加载一个页面的过程就是通过http协议从服务器端下载项目所需 ...
vue 项目加载顺序_如何提高Vue项目首页的加载速度
为何当一个VUE项目过大时,打包之后初次访问首页加载速度会异常的缓慢,是什么原因导致以及如何解决这些问题? 首页打开速度慢的原因其实浏览器加载一个页面的过程就是通过http协议从服务器端下载项目所需 ...

Vue项目首页-热销推荐组件开发（7-6）

热销推荐组件开发

Vue项目首页-热销推荐组件开发（7-6）相关推荐

最新文章

热门文章