主要记录一个基于vue的商城小项目熟悉vue语法(适合新手练手),同时提出一些自己在写的时候遇到的问题。
这些是该项目里面使用的一些依赖,大家创建项目时记得勾选,或者引入。
首页的整体页面如下,数据都是写死的,比较简单:
首页的搜索栏,轮播图,图标使用的都是Vant组件,我将轮播图,图标,产品,每周上新,拆分成组件,在首页中引用,与原生相比大大减少代码的书写数量,每个模块书写的也更加整洁。
HomeSwiper.vue代码:
<template>
<div class="home-swiper">
<van-swipe :autoplay="3000" lazy-render indicator-color="#FF8000">
<van-swipe-item v-for="item in banner" :key="item">
<img :src="item">
</van-swipe-item>
</van-swipe>
</div>
</template>
<script setup>
const banner = [
'./images/banner1.jpg',
'/images/banner2.jpg',
]
</script>
<style lang="less" scoped>
.home-swiper {
width: 100%;
img {
width: 100%;
}
}
</style>
HomeGrid.vue代码:
<template>
<div class="home-grid">
<van-grid :column-num="5" square :gutter="5">
<van-grid-item v-for="list in menulist">
<van-image :src="list.url" />
<span>{{ list.text }}</span>
</van-grid-item>
</van-grid>
</div>
</template>
<script setup>
import menu1 from "@/assets/images/menu1.png";
import menu2 from "@/assets/images/menu2.png";
import menu3 from "@/assets/images/menu3.png";
import menu4 from "@/assets/images/menu4.png";
import menu5 from "@/assets/images/menu5.png";
import menu6 from "@/assets/images/menu6.png";
import menu7 from "@/assets/images/menu7.png";
import menu8 from "@/assets/images/menu8.png";
import menu9 from "@/assets/images/menu9.png";
import menu10 from "@/assets/images/menu10.png";
const menulist = [
{ text: "今日爆款", url: menu1 },
{ text: "好物分享", url: menu2 },
{ text: "推荐购买", url: menu3 },
{ text: "购物心得", url: menu4 },
{ text: "直播专区", url: menu5 },
{ text: "签到中心", url: menu6 },
{ text: "值得购买", url: menu7 },
{ text: "每日优惠", url: menu8 },
{ text: "充值中心", url: menu9 },
{ text: "我的客服", url: menu10 },
];
</script>
<style lang="less" scoped>
.home-grid {
.van-image {
width: 55%;
}
span {
font-size: 12px;
}
}
</style>
HomeProduct.vue代码:
<template>
<div class="home-product">
<ul>
<li v-for="item in brandList" :key="item.id">
<img :src="item.pic_url" alt="" />
<h4>{{ item.name }}</h4>
</li>
</ul>
</div>
</template>
<script setup>
const brandList = [
{ id: 1, name: "直播", pic_url: "/images/product1.png" },
{ id: 2, name: "推荐", pic_url: "/images/product2.png" },
{ id: 3, name: "补贴", pic_url: "/images/product3.png" },
{ id: 4, name: "分享", pic_url: "/images/product4.png" },
];
</script>
<style lang="less" scoped>
.home-product > ul {
display: flex;
justify-content: space-between;
// 分行
flex-wrap: wrap;
li {
width: 49.5%;
position: relative;
img {
width: 100%;
}
h4 {
position: absolute;
top: 0;
font-size: 14px;
border-radius: 10%;
background-color: red;
color: white;
padding: 1px 3px;
}
}
}
</style>
这里书写样式时,使用了flex布局,flex-wrap进行换行,对于li开启relative,h4开启absolute。下面Home.vue一样。
HomeNew.vue代码:
<template>
<div class="home-new">
<div class="home-new-title">
<h3>每周上新</h3>
</div>
<ul>
<li v-for="item in newList" :key="item.id">
<img :src="item.list_pic_url">
<p>{{ item.name }}</p>
<p><span>¥</span>{{ item.retail_price }}</p>
</li>
</ul>
</div>
</template>
<script setup>
import new1 from '/images/new1.jpg'
import new2 from '/images/new2.jpg'
import new3 from '/images/new3.jpg'
import new4 from '/images/new4.jpg'
const newList = [
{ name: '懒人小沙发', list_pic_url: new1, retail_price: '128.00' },
{ name: '减压弹力球', list_pic_url: new2, retail_price: '89.00' },
{ name: '简约一字夹发夹', list_pic_url: new3, retail_price: '12.8' },
{ name: '毛线小兔子耳朵发夹', list_pic_url: new4, retail_price: '9.9' }
]
</script>
<style lang="less" scoped>
.home-new {
.home-new-title {
text-align: center;
font-size: 16px;
height: 50px;
}
ul{
display: flex;
justify-content: space-between;
position: relative;
flex-wrap: wrap;
background-color: #f9f9f9;
li{
width: 49.5%;
img{
width:100%;
}
p{
text-align: center
}
};
}
}
</style>
最后整合到Home.vue主页,因为我使用的是组件式,所以只需要导入,然后实例化就行,不需要注册,毕竟一切为了减少书写代码量。
Home.vue代码:
<template>
<van-search
shape="round"
v-model="value"
placeholder="请输入搜索关键词"
@search="onSearch"
@cancel="onCancel"
>
</van-search>
<HomeSwiper></HomeSwiper>
<HomeGrid></HomeGrid>
<HomeProduct></HomeProduct>
<HomeNew></HomeNew>
</template>
<script setup>
import HomeSwiper from './HomeSwiper.vue';
import HomeGrid from './HomeGrid.vue';
import HomeProduct from './HomeProduct.vue';
import HomeNew from './HomeNew.vue';
</script>
<style lang="less" scoped>
</style>
这样首页就完成了,明天做菜单页面,用到leancloud作为后台,使用axios异步数据请求,SpringMVC中的拦截器等内容。