路由配置
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>