shop_font_0(vue组合式）

黄同学不会前端

已于 2023-11-13 23:09:35 修改

阅读量38

点赞数 2

文章标签：前端 javascript html

于 2023-11-08 23:31:08 首次发布

本文链接：https://blog.csdn.net/m0_56164661/article/details/134299661

版权

主要记录一个基于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一样。

flex-warp参考：https://blog.csdn.net/chenjiebin/article/details/120442823?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522169945692116800211541838%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=169945692116800211541838&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_click~default-1-120442823-null-null.142^v96^pc_search_result_base2&utm_term=flex-wrap%E5%B1%9E%E6%80%A7&spm=1018.2226.3001.4187

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中的拦截器等内容。