仿写京东移动端首页

一、项目简介

该项目是制作京东移动端页面，完成首页头部搜索和底部导航布局，利用 swiper 完成首页的轮播图效果以及 nav 和超值购区域布局，最后点击底部导航的‘分类’可以跳转到分类页面。因为目前是在构建前端页面阶段，所以暂时是没有后台部分的。
需求如下：

京东首页
京东分类页

二、项目架构

1、项目架构

App.vue作为主组件在main.js（入口文件）中被使用，主组件App.vue调用其他组件，构建页面。通过vue-router实现页面的跳转，配置根路径为Home主页面，配置分类路径为Classify分类页面。
Home.vue路由组件是通过调用Header、Swiper、Navi、Hot以及Foot组件，完成页面的构建。

项目架构图

2、项目初始化

通过vue-cli脚手架工具完成项目初始化。项目创建完成后，会自动生成基本的项目结构。
node_modules：存放项目需要的各种环境依赖包。
public：存放一个网站标签favicon.ico和index首页。之后打包，会把这些文件原封不动地打包。
src：前端写的源代码都会在这个文件夹下。
.browserslistrc：这个文件是对浏览器的一些配置。
.eslintrc.js：代码风格检测。如果我们在其中配置一些代码规则，当我们写代码时出现不符合规则的代码，编译时就会报错。
.gitignore：这个文件是使用git上传时，对某些文件忽略。
bable.config.js：对bable进行配置的文件，一般不做修改。
package.json：整个项目对包的配置都在这里面，还包括了启动项目命令等。

项目结构

三、项目实现

1、App.vue

App.vue是项目的主组件，页面入口文件 。所有页面都在App.vue下进行切换。
router-view是路由视图组件，用于呈现路由页面。

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: "App",
  components: {},
};
</script>
<style>
* {
  margin: 0;
  padding: 0;
  list-style: none;
  outline: none;
  text-decoration: none;
}
.flex {
  display: flex;
}
.j-c {
  justify-content: center;
}
.j-s {
  justify-content: space-between;
}
.a-c {
  align-items: center;
}
</style>

2、路由配置

Vue Router是Vue.js官方的路由管理器，可以实现页面的跳转。

// 导入vue
import Vue from 'vue'
// 导入vue-router
import VueRouter from 'vue-router'
// 使用vue-router
Vue.use(VueRouter)
// 导入Home组件
import Home from '../page/Home.vue'
// 定义当前路由器对象管理的路由信息
const routes = [
  // 配置根路径
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  // 配置/classify路径
  {
    path: '/classify',
    name: 'Classify',
    component:()=>import('../page/Classify.vue')
  }
]
const router = new VueRouter({
  routes
})
export default router

3、主页Home.vue

Home主页是通过调用Header、Swiper、Navi、Hot以及Foot组件，完成页面的构建。

<template>
  <div>
    <!-- 使用组件 -->
    <Header></Header>
    <Swiper></Swiper>
    <Navi></Navi>
    <Hot></Hot>
    <Foot></Foot>
  </div>
</template>
<script>
// 导入组件
import Header from "../components/Header.vue";
import Swiper from "../components/Swiper.vue";
import Navi from "../components/Navi.vue";
import Hot from "../components/Hot.vue";
import Foot from "../components/Foot.vue";
export default {
  name: "Home",
  // 注册组件
  components: {
    Header,
    Swiper,
    Navi,
    Hot,
    Foot
  }
};
</script>

4、头部组件Header.vue

头部组件
<template>
  <div class="header flex a-c j-s">
    <div class="logo"></div>
    <div class="search flex a-c">
      <span class="search-logo"></span>
      <input type="text" class="txt" placeholder="请输入你要查找的内容" />
    </div>
    <div class="login">登录</div>
  </div>
</template>
<script>
export default {
  name: "Header",
};
</script>
<style scoped>
.header {
  height: 40px;
  background-color: #c71a20;
  padding: 0 10px;
}
.logo {
  width: 60px;
  height: 26px;
  background-image: url("/images/sprites.png");
  background-repeat: no-repeat;
  background-position: 0 -107px;
  background-size: 200px 200px;
}
.search {
  background-color: white;
  width: 245px;
  height: 30px;
  line-height: 30px;
  padding-left: 5px;
  box-sizing: border-box;
  border-radius: 5px;
}
.search .txt {
  background-color: transparent;
  border: none;
  flex: 1;
  font-size: 14px;
}
.search-logo {
  width: 22px;
  height: 20px;
  background-image: url(/images/sprites.png);
  background-repeat: no-repeat;
  background-size: 200px 200px;
  background-position: -60px -110px;
}
.login {
  color: white;
}
</style>

5、轮播图组件Swiper.vue

通过Swiper插件实现轮播图效果。
Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。Swiper能实现触屏焦点图、触屏Tab切换、触屏轮播图切换等常用效果。

轮播图
<template>
  <div class="swiper">
    <!-- swiper组件，options属性设置配置选项 -->
    <swiper :options="swiperOptions">
      <!-- swiper组件的每一项 -->
      <swiper-slide class="swiper-slide">
        <img src="/images/banner1.jpg" />
      </swiper-slide>
      <swiper-slide class="swiper-slide">
        <img src="/images/banner2.jpg" />
      </swiper-slide>
      <swiper-slide class="swiper-slide">
        <img src="/images/banner3.jpg" />
      </swiper-slide>
      <!-- 分页器 -->
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>
<script>
// 导入swiper的组件
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
// 导入swiper的样式
import "swiper/css/swiper.css";
export default {
  // 注册组件
  components: {
    Swiper,
    SwiperSlide,
  },
  data() {
    return {
      // 定义swiper的配置选项
      swiperOptions: {
        // 指定分页器
        pagination: {
          // 指定分页器的容器
          el: ".swiper-pagination",
          // 点击分页器的指示点，会控制Swiper切换
          clickable: true,
        },
        // 配置自动播放
        // autoplay:true
        autoplay: {
          //自动播放
          autoplay: true,
          // 设置间隔时间
          delay: 2500,
          // 用户操作swiper之后，是否禁止autoplay
          disableOnInteraction: false,
        },
        // 配置衔接滑动
        loop: true
      },
    };
  },
};
</script>
<style scoped>
.swiper img{
  width: 100%
}
</style>

6、导航组件Navi.vue

导航
<template>
  <div class="navi flex a-c j-s">
    <div class="item" v-for="(item,index) in list" :key="index">
      <img :src="item.imgUrl"/>
      <p>{{item.title}}</p>
    </div>
  </div>
</template>
<script>
export default {
  name: "Navi",
  data() {
    return {
      list:[
        {
          title:'分类查询',
          imgUrl:'/images/nav0.png'
        },
        {
          title:'物流查询',
          imgUrl:'/images/nav1.png'
        },
        {
          title:'购物车',
          imgUrl:'/images/nav2.png'
        },
        {
          title:'我的京东',
          imgUrl:'/images/nav3.png'
        },
        {
          title:'充值',
          imgUrl:'/images/nav4.png'
        },
        {
          title:'领券中心',
          imgUrl:'/images/nav5.png'
        },
        {
          title:'京东超市',
          imgUrl:'/images/nav6.png'
        },
        {
          title:'我的关注',
          imgUrl:'/images/nav7.png'
        },
      ]
    }
  },
};
</script>
<style scoped>
.navi{
  flex-wrap: wrap;
  border-bottom: 2px solid #ccc;
}
.item{
  width: 21%;
  text-align: center;
  margin: 2px 0;
}
.item img{
  width: 42px;
}
</style>

7、超值购Hot.vue

超值购
<template>
  <div class="hot">
      <div class="top"><span></span>超值购</div>
      <div class="content flex">
        <div class="left">
          <img src="/images/cp1.jpg">
        </div>
        <div class="right">
          <img class="quick" src="/images/cp2.jpg">
          <img src="/images/cp3.jpg">
        </div>
      </div>
  </div>
</template>
<script>
export default {
  name: "Hot",
};
</script>
<style scoped>
.top span{
  display: inline-block;
  width: 2px;
  height: 12px;
  background-color: #c71a20;
  margin: 0 8px;
}
.top{
  border-bottom: 1px solid #ccc;
  padding: 4px 0;
}
.content{
  border-bottom: 1px solid #ccc;
  padding-bottom: 10px;
}
.left{
  flex: 1;
  border-right:1px solid #ccc
}
.left img{
  width: 100%;
  display: block;
}
.right{
  flex: 1;
}
.quick{
  border-bottom: 1px solid #ccc;
}
.right img{
  width: 100%;
  display: block;
}
</style>

8、底部组件Foot.vue

通过 router-link 的方式，实现点击 Foot.vue 组件中的“分类”时可以跳转到分类组件。
router-link是路由链接组件，用于跳转路由。通过传入 to 属性指定链接。router-link默认会被渲染成一个 <a> 标签。

底部
<template>
  <div class="foot flex a-c">
      <img src="/images/icon-home.png" >
      <router-link to="/classify"><img src="/images/icon-catergry.png" ></router-link>
      <img src="/images/icon-cart.png" >
      <img src="/images/icon-me.png" >
  </div>
</template>
<script>
export default {
  name: "Foot"
};
</script>
<style scoped>
.foot{
  height: 50px;
  justify-content: space-around;
}
.foot img{
  height: 50px;
  display: block;
}
</style>

9、分类页面Classify.vue

分类页面中，点击返回首页，可以跳转回首页。

分类页面
<template>
  <div>
    <div class="top">
       这是分类页面
    </div>
    <router-link class="gohome" to="/">返回首页</router-link>
  </div>
</template>
<script>
  export default {
    name:'Classify'
  }
</script>
<style scoped>
.top {
  height: 50px;
  line-height: 50px;
  background-color: #c71a20;
  color: white;
  text-align: center;
  box-sizing: border-box;
  font-size: 20px;
  margin-bottom: 15px;
}
.gohome{
  background-color: #c71a20;
  color: white;
  padding: 10px 15px;
  margin-left: 5px;
  border-radius: 4px;
}
</style>

四、项目总结

目前，该项目只是简单地完成了首页页面构建以及跳转分页功能，还有很多不足。页面数据是写死的，没有通过向后台发送请求获得数据；其次，项目中还有很多模块功能没有实现，后续还需要继续改进、完善整个项目。我个人认为，项目在实际去搭建前，需要先确定好整体的项目架构。整体搭建完成，再去着手局部模块功能的实现，这样可以事半功倍。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容