京东购物车

路由配置

import Vue from 'vue'

import VueRouter from 'vue-router'

Vue.use(VueRouter)

import Home from '../page/Home.vue'

import Classify from '../page/Classify.vue'

let router = new VueRouter({

routes:[

    {

        path:'/',

        component:Home

    },

    {

        path:'/classify',

        component:Classify

    }

]

})

export default router

APP配置

<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;

    text-decoration: none;

    outline: none;

}

.flex{

  display: flex;

}

.j-c{

  justify-content: center;

}

.j-s{

  justify-content: space-between;

}

.a-c{

  align-items: center;

}

#app {

  /* width: 1200px; */

  /* margin: 0 auto; */

  border: 1px solid #ccc;

}

</style>

main.js

import Vue from 'vue'

import App from './App.vue'

Vue.config.productionTip = false

import router from './router/index'

// 全局导入

import VueAwesomeSwiper from 'vue-awesome-swiper'

import 'swiper/css/swiper.css'

Vue.use(VueAwesomeSwiper)

new Vue({

  render: h => h(App),

  router

}).$mount('#app')

header.vue

 

<template>

  <div class="header flex j-s a-c">

    <div class="logo"></div>

    <div class="search flex a-c">

      <div class="icon"></div>

      <input type="text" placeholder="请输入你要查找的内容" />

    </div>

    <div class="login">登录</div>

  </div>

</template>

<script>

export default {

  name: "Header",

};

</script>

<style scoped>

.header {

  height: 40px;

  background-color: #ca1423;

  padding: 0px 10px;

  border-bottom: 1px solid white;

  /* padding-right: 15px; */

}

.logo {

  width: 60px;

  height: 30px;

  background: url("/images/sprites.png") no-repeat 0px -107px /200px 200px;

}

.search {

  width: 200px;

  height: 30px;

  background-color: white;

  border-radius: 5px;

}

.search .icon{

    width: 30px;

    height: 25px;

    background: url("/images/sprites.png") no-repeat -55px -107px/ 200px 200px;

}

.search input {

  border: none;

}

.login{

    color: white;

}

</style>

 foot.vue     

<template>

<div class="foot flex j-s">

    <img src="/images/icon-home.png" alt="">

    <img src="/images/icon-catergry.png" @click="$router.push('/classify')">

    <img src="/images/icon-cart.png" alt="">

    <img src="/images/icon-me.png" alt="">

</div>

</template>

<script>

export default {

name:'Foot'

}

</script>

<style>

img{

    width: 20%;

}

</style>

hot.vue

 

<template>

<div class="hot">

    <div class="title">超值购</div>

    <div class="img">

        <div class="left">

            <img src="/images/cp1.jpg">

        </div>

        <div class="right">

            <img src="/images/cp2.jpg">

            <img src="/images/cp3.jpg">

        </div>

    </div>

</div>

</template>

<script>

export default {

name:'Hot'

}

</script>

<style scoped>

.hot{

    padding: 0 5px;

}

.hot .title{

    font-size: 14px;

    height: 14px;

    border-left: 2px solid #D55560;

    padding-left: 5px;

    margin: 10px 5px;

    line-height: 14px;

}

.img{

    display: flex;

    border-top: 1px solid #ccc;

    border: 1px solid #ccc;

}

.left{

    width: 50%;

    border-right: 1px solid #ccc;

}

.left img{

    width: 100%;

    /* height: 50%; */

}

.right{

    width: 50%;

}

.right img{

    width: 100%;

}

.right img:last-child{

    border-top: 1px solid #ccc;

}

</style>

navi.vue

 

<template>

  <div class="navi">

    <div class="item">

      <img src="/images/nav0.png" />

      <span>分类查询</span>

    </div>

    <div class="item">

      <img src="/images/nav1.png" />

      <span>物流查询</span>

    </div>

    <div class="item">

      <img src="/images/nav2.png" />

      <span>购物车</span>

    </div>

    <div class="item">

      <img src="/images/nav3.png" />

      <span>我的京东</span>

    </div>

    <div class="item">

      <img src="/images/nav4.png" />

      <span>充值</span>

    </div>

    <div class="item">

      <img src="/images/nav5.png" />

      <span>领券中心</span>

    </div>

    <div class="item">

      <img src="/images/nav6.png" />

      <span>京东超市</span>

    </div>

    <div class="item">

      <img src="/images/nav7.png" />

      <span>我的关注</span>

    </div>

  </div>

</template>

<script>

export default {

  name: "Navi",

};

</script>

<style scoped>

.navi {

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

  border-bottom: 1px solid #ccc;

}

.item {

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  font: 14px;

  margin-bottom: 10px;

}

.item img {

  margin-bottom: 5px;

  width: 70%;

}

</style>

swiper.vue轮播

  

<template>

  <div class="swiper">

    <swiper ref="mySwiper" :options="swiperOptions">

      <swiper-slide>

        <img src="/images/banner1.jpg" />

      </swiper-slide>

      <swiper-slide>

        <img src="/images/banner2.jpg" />

      </swiper-slide>

      <swiper-slide>

        <img src="/images/banner3.jpg" />

      </swiper-slide>

      <div class="swiper-pagination" slot="pagination"></div>

    </swiper>

  </div>

</template>

<script>

// 局部注册

// import { Swiper, SwiperSlide} from 'vue-awesome-swiper'

// import 'swiper/css/swiper.css'

export default {

  name: "mySwiper",

  data() {

    return {

      swiperOptions: {

        pagination: {

          el: ".swiper-pagination",

        },

        loop:true,

        autoplay:{

            delay:1000,

            autoplay:true,

            disableOnInteraction:false

        }

      }

    }

  },

//   components:{

//     Swiper,

//     SwiperSlide

//   }

};

</script>

<style scoped>

.swiper img {

  width: 100%;

}

</style>

classify.vue

<template>

<div class="classify">

    <div class="top">这是分类页面</div>

    <div class="gotohome">

        <router-link to="/">返回首页</router-link>

    </div>

</div>

</template>

<script>

export default {

name:'Classify'

}

</script>

<style scoped>

.classify{

    width: 100%;

    height: 50px;

    font-size: 30px;

    text-align: center;

    color: white;

    line-height: 50px;

    background-color: #C91423;

}

.gotohome{

    width: 100px;

    height: 40px;

    background-color: #C91423;

    font-size: 17px;

    line-height: 40px;

    text-align: center;

    margin: 10px;

}

a{

    color: white;

}

</style>

home.vue

<template>

<div>

    <Header></Header>

    <Swiper></Swiper>

    <Navi></Navi>

    <Hot></Hot>

    <Foot></Foot>

</div>

</template>

<script>

import Header from '../components/Header.vue'

import Hot from '../components/Hot.vue'

import Navi from '../components/Navi.vue'

import Swiper from '../components/Swiper'

import Foot from '../components/Foot.vue'

export default {

name:'Home',

components:{

    Header,

    Hot,

    Navi,

    Swiper,

    Foot

}

}

</script>

<style scoped>

</style>