基于Vue2开发的简易小米商城网页

基于Vue2开发的简易小米商城网页

简介

该项目采用vue2设计出了可交互的小米商城网页，分为一个App.vue的主组件，以及七个子组件(Com-footer.vue,Com-homehero.vue,Com_nav.vue,Com_notebook.vue,Com_phone.vue,Com_smartwear.vue,Com_top.vue)。

实现步骤

创建项目

本项目利用Vue的脚手架工具创建，在项目文件目录下打开终端，输入命令vue cli即可打开网页版的脚手架工具，利用改工具可快速创建vue项目。如图：

分析页面

访问小米商城的网页首页，对页面结构进行分析。将页面分为几个模块，对应的就是几个子组件，由于为简易版，作者没有将其全部模块分出，但是该有的功能都有。

编写代码：

ps:由于代码量过大，本文不全部贴出。

app.vue:

该部分主要是页面的主组件，在主组件下引用子组件即可完成页面的拼接，另外页面的全局css样式也应写在该文件里

<template>
  <div class="app">
    <!--    页面顶部-->
    <ComTop></ComTop>
<!--      页面导航-->
    <ComNav></ComNav>
    <ComHomehero></ComHomehero>
<!--      手机板块-->
    <ComPhone></ComPhone>
<!--    智能穿戴板块-->
    <ComSmartwear></ComSmartwear>
<!--    笔记本平板板块-->
    <ComNotebook></ComNotebook>
<!--    页面底部-->
    <ComFooter></ComFooter>

  </div>
</template>

<script>
import ComTop from './components/Com_top.vue'
import ComNav from './components/Com_nav.vue'
import ComHomehero from "@/components/Com-homehero.vue";
import ComPhone from "@/components/Com_phone.vue";
import ComSmartwear from "@/components/Com_smartwear.vue";
import ComNotebook from "@/components/Com_notebook.vue";
import ComFooter from "@/components/Com-footer.vue";

export default {
  name: 'App',
  components: {
    ComTop,
    ComNav,
    ComHomehero,
    ComPhone,
    ComSmartwear,
    ComNotebook,
    ComFooter
  }
}
</script>

<style>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: #333;
}

ul, ol {
  list-style: none;
}

.c1226 {
  width: 1226px;
  margin: auto;
}


</style>

Com_top.vue:

该部分是网页的顶部，主要实现了顶部的设计

<script>
export default {
  name: "ComTop",
  data() {
    return {
      list1: ['小米官网', '小米商城', '小米澎湃OS', '小米汽车', '云服务', 'IoT', '有品', '小爱开放平台', '资质证照', '协议规则', '下载app', 'Select Location'],
      list2: ['登录', '注册', '消息通知', '购物车（0）'],
    }
  }
}
</script>

<template>
  <div class="top">
    <div class="c1226">
      <ul class="left" >
        <li v-for="(item,index) in list1"><a href="#">{{ item }}</a><span v-if="index<list1.length-1">|</span></li>
      </ul>
      <ul class="right" >
        <li v-for="(item,index) in list2" ><a href="#">{{ item }}</a><span v-if="index<list2.length-1" >|</span></li>
      </ul>
    </div>
  </div>
</template>

<style scoped>
.top {
  background-color: #333333;
  height: 40px;
  line-height: 40px;
  font-size: 12px;
  color: #b0b0b0;
}

.top .left {
  float: left;
}

.top .right {
  float: right;
}

.top a {
  color: #b0b0b0;
}

.top a:hover {
  color: #ffffff;
}

.top span {
  margin: 0.5em;
  color: #424242
}

.top .left li, .top .right li {
  float: left;
}
</style>

Com_nav.vue:

该部分实现了网页导航栏

<script>
export default {
  name: 'ComNav',
  data() {
    return {
      list: ['Xiaomi手机', 'Redmi手机', '电视', '笔记本', '平板', '家电', '路由器', '服务中心', '社区']
    }
  }
}
</script>

<template>
  <div class="nav c1226">

      <div class="logo">
        <img src="@/assets/imgs/logo-mi2.png" alt=""/>
      </div>
      <div class="navbar">
        <ul class="nav-list">
          <li v-for="(item,index) in list"><a href="#">{{ item }}</a></li>
        </ul>
      </div>
      <div class="search">
        <input type="text" placeholder="搜索小米手机" class="search-input">
        <input type="submit" class="search-btn">
      </div>

  </div>
</template>

<style scoped>
.nav {
  height: 100px;
  position: relative;
}

.nav .logo {
  float: left;
  width: 56px;
  height: 56px;
  margin-top: 22px;
}

.nav .navbar {
  width: 750px;
  height: 100px;
  padding-left: 100px;
}

.nav .search {
  position: absolute;
  top: 25px;
  right: 0;
  width: 275px;
  height: 50px;
}

.nav .search .search-input {
  width: 223px;
  height: 48px;
  padding: 0 10px;
  line-height: 48px;
  border: 1px solid #e0e0e0;
}

.nav .search .search-btn {
  width: 52px;
  height: 48px;
  background-color: #fff;
  padding: 0 10px;
  line-height: 48px;
  border: 1px solid #e0e0e0;
}

.nav img {
  width: 56px;
  height: 56px;

}

.nav .navbar .nav-list li {
  padding-top: 30px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 38px;
  float: left;
  font-size: 16px;
  line-height: 24px;
}

.nav .navbar .nav-list li a:hover {
  color: #ff6700;
}

.search .search-input {
  width: 223px;
  height: 48px;
  padding-left: 10px;
  padding-right: 10px;
}
</style>

Com_phone.vue:

该部分主要实现了网页的手机分块板块：

<script>
export default {
  name: 'ComPhone',
  data() {
    return {
      phoneBigUrl: require('../assets/imgs/phone-big.png'),
      phoneHdleftUrl: require('../assets/imgs/phone-hd-leftimg.png'),
      title: '手机',
      more: '查看更多',
      bdlist: [
        {
          src: require('../assets/imgs/xmi15.png'),
          title: 'XiaoMi 15',
          desc: ' 徕卡光学 Summilux 高速镜头｜骁龙®8至尊版移动平台｜5400mAh 小米金沙江电池 小米澎湃OS 2',
          price: '4499元起'
        },
        {
          src: require('../assets/imgs/xmi15pro.png'),
          title: 'Xiaomi 15 Pro',
          desc: ' 徕卡光学 Summilux 高速镜头｜骁龙®8至尊版移动平台｜6100mAh 小米金沙江电池 小米澎湃OS 2',
          price: '5299元起'
        },
        {
          src: require('../assets/imgs/xmi15dingzhi.png'),
          title: 'XiaoMi 定制版',
          desc: ' 徕卡光学 Summilux 高速镜头｜骁龙®8至尊版移动平台｜5400mAh 小米金沙江电池 小米澎湃OS 2',
          price: '4499元'
        },
        {
          src: require('../assets/imgs/redminote14pro+.png'),
          title: 'Redmi Note 14 Pro+',
          desc: '第三代骁龙®7s',
          price: '1899元起'
        },
        {
          src: require('../assets/imgs/redminote14pro.png'),
          title: 'Redmi Note 14 Pro',
          desc: '天玑 7300-Ultra',
          price: '1399元起'
        },
        {
          src: require('../assets/imgs/redmik70zhizun.png'),
          title: 'Redmi K70 至尊版',
          desc: '性能魔王 全面进化',
          price: '2499元起'
        },
        {
          src: require('../assets/imgs/xiaomimixflip.png'),
          title: 'Xiaomi MIX Flip',
          desc: '4.01英寸多功能超大外屏|徕卡光学Summilux镜头',
          price: '5999元起'
        },
        {
          src: require('../assets/imgs/xiaomimixfold4.png'),
          title: 'Xiaomi MIX Fold 4',
          desc: '超轻薄四曲面机身|小米龙骨转轴2.0|全碳纤维支撑架构',
          price: '8999元起'
        },
      ]
    }
  }
}
</script>

<template>
  <div class="phone">
    <div class="c1226">
      <div class="phone-banner-box"><img :src="phoneBigUrl" alt=""/></div>
      <div class="phone-content-box">
        <div class="phone-content-hd">
          <h2 class="title">{{ title }}</h2>
          <div class="more"><a href="#">{{ more }}</a></div>
        </div>
        <div class="phone-content-bd">
          <div class="span4">
            <img :src="phoneHdleftUrl" class="phone-hd-left-img"/>
          </div>

          <div class="span16">
            <ul>
              <li v-for="(item,index) in bdlist" :key="index"><a href="#"><div class="span16-img"><img :src="item.src"/></div>
                <h3>{{ item.title }}</h3>
                <p class="desc">{{ item.desc }}</p>
                <p class="price">{{ item.price }}</p></a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.phone {
  background-color: #f5f5f5;
}

.phone .phone-banner-box {
  display: block;
  height: 120px;
  margin: 22px 0;
}

.phone .phone-banner-box img {
  margin: 22px auto;
  line-height: 120px;
  width: 100%;
  height: 120px;
}

.phone .phone-content-box .phone-content-hd {
  display: block;
  height: 58px;
  position: relative;
}

.phone .phone-content-box .phone-content-hd .title {
  margin: 0;
  font-size: 22px;
  font-weight: 200;
  line-height: 58px;
  color: #333;
  display: block;
}

.phone .phone-content-box .phone-content-hd .more {
  position: absolute;
  top: 0;
  right: 0;
}

.phone .phone-content-box .phone-content-hd .more a {
  display: block;
  font-size: 22px;
  color: #333;
  line-height: 58px;
}

.phone .phone-content-box .phone-content-hd .more a:hover {
  color: #ff6700;
}

.phone .phone-content-box .phone-content-bd {
  overflow: hidden;
}

.phone .phone-content-box .phone-content-bd .span4 {
  width: 234px;
  float: left;
  transition: all 0.3s ease;
  position: relative;
}
.phone .phone-content-box .phone-content-bd .span4:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  transform: translateY(-5px);
}

.phone .phone-content-box .phone-content-bd .span4 .phone-hd-left-img {
  width: 100%;
}

.phone .phone-content-box .phone-content-bd .span16 {
  width: 978px;
  float: left;
  margin-left: 14px;
}
.phone .phone-content-box .phone-content-bd .span16 ul{
  width: 992px;
  height: 614px;
}
.phone .phone-content-box .phone-content-bd .span16 ul li{
  float: left;
  height: 300px;
  width: 234px;
  background-color: #fff;
  margin-left: 14px;
    margin-bottom: 14px;
  transition: all 0.3s ease;
  position: relative;
}
.phone .phone-content-box .phone-content-bd .span16 ul li:hover{
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  transform: translateY(-5px);
}
.phone .phone-content-box .phone-content-bd .span16 ul li .span16-img{
  display: block;
  margin: 0 auto 18px;
}
.phone .phone-content-box .phone-content-bd .span16 ul li img{
  display: block;
  width: 160px;
  height: 160px;
  margin: 0 auto;
}
.phone .phone-content-box .phone-content-bd .span16 ul li h3{
  margin: 0 10px 2px;
      text-align: center;
      font-size: 14px;
    font-weight: 400;
    color: #333;
}
.phone .phone-content-box .phone-content-bd .span16 ul li .desc{
  display: block;
  margin: 0 10px 10px;
    height: 18px;
    font-size: 12px;
    color: #b0b0b0;
    text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.phone .phone-content-box .phone-content-bd .span16 ul li .price{
  display: block;

      margin: 0 10px 10px;
    text-align: center;
    color: #ff6700;
}
</style>

项目分析

1. 渲染数据利用v-for配合html标签对数据进行循环遍历
2. 切换板块数据利用鼠标事件以及v-show实现页面的切换
3. 由于还在vue学习的初期，有地方做的还不是很完善，希望未来的学习中能补这个窟窿

实现结果