[JavaScript֪ʶ¿â]JIANSHU

1, npm i axios

App.vue

<template>

? <div?id="app">

? ?<Header></Header>

? ?<router-view></router-view>

? </div>

</template>

<script>

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

export?default?{

? name:?'App',

? components:?{

? ?Header

? }

}

</script>

<style>

@import?url('/iconfont/iconfont.css');

*{

? margin:?0;

? padding:?0;

? list-style:?none;

? text-decoration:?none;

? outline:?none;

}

a{

? color:?black;

}

.flex{

? display:?flex;

}

.j-c{

? justify-content:?center;

}

.j-s{

? justify-content:?space-between;

}

.a-c{

? align-items:?center?;

}

#app?{

? width:?1200px;

? margin:?0px?auto;

? border:?1px?solid?#ccc;

}

</style>

Index.js

import?Vue?from?'vue'

import?VueRouter?from?'vue-router'

Vue.use(VueRouter)

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

let?router?=?new?VueRouter({

? ? routes:?[

? ? ? ? {

? ? ? ? ? ? path:'/',

? ? ? ? ? ? component:Home

? ? ? ? }

? ? ]

})

export?default?router

Main.js

import?Vue?from?'vue'

import?App?from?'./App.vue'

Vue.config.productionTip?=?false

import?router?from?'./router'

new?Vue({

? render:?h?=>?h(App),

? router

}).$mount('#app')

Home.vue

<template>

? ? <div?class="home flex j-s">

? ? ? ? <div>

? ? ? ? ? ? <img?class="top"?src="/images/home.png">

? ? ? ? ? ? <List?:list="listInfo"></List>

? ? ? ? </div>

? ? ? ? <div>

? ? ? ? ? ? <Recommend></Recommend>

? ? ? ? </div>

? ? </div>

</template>

<script>

import?List?from?'../components/List.vue'

import?Recommend?from?'../components/Recommend.vue'

import?axios?from?'axios'

? ? export?default?{

? ? ? ? name:?"Home",

? ? ? ? components:{

? ? ? ? ? ? List,

? ? ? ? ? ? Recommend

? ? ? ? },

? ? ? ? data() {

? ? ? ? ? ? return?{

? ? ? ? ? ? ? ? listInfo:[],

? ? ? ? ? ? }

? ? ? ? },

? ? ? ? mounted() {

? ? ? ? ? ?axios.get('/api/home.json').then(({data:{data:{listInfo}}})=>{

? ? ? ? ? ? ? ?this.listInfo?=?listInfo

? ? ? ? ? ?})

? ? ? ? },

? ? };

</script>

<style?scoped>

? ? .home{

? ? ? ? width:?900px;

? ? ? ? margin:?0?auto;

? ? }

? ? .home?.top{

? ? ? ? width:?600px;

? ? }

</style>

Header.vue

<template>

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

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

? ? ? ? ? ? <div>

? ? ? ? ? ? ? ? <img?src="/images/logo.png"?/>

? ? ? ? ? ? </div>

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

? ? ? ? ? ? ? ? <a?class="sy"?href="javascript:;">Ê×Ò³</a>

? ? ? ? ? ? ? ? <a?href="javascript:;">ÏÂÔØApp</a>

? ? ? ? ? ? ? ? <div?class="txt flex a-c">

? ? ? ? ? ? ? ? ? ? <input?type="text"?placeholder="ËÑË÷"?/>

? ? ? ? ? ? ? ? ? ? <i?class="iconfont">¤f</i>

? ? ? ? ? ? ? ? </div>

? ? ? ? ? ? </div>

? ? ? ? </div>

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

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

? ? ? ? ? ? ? ? <a?href="javascript:;">怬</a>

? ? ? ? ? ? ? ? <a?href="javascript:;"><i?class="iconfont">¤‘</i></a>

? ? ? ? ? ? </div>

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

? ? ? ? ? ? ? ? <div?class="zc">×¢²á</div>

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

? ? ? ? ? ? ? ? ? ? <i?class="iconfont">¤u</i>дÎÄÕÂ

? ? ? ? ? ? ? ? </div>

? ? ? ? ? ? </div>

? ? ? ? </div>

? ? </div>

</template>

<script?scoped>

? ? export?default?{

? ? ? ? name:?"Header"

? ? };

</script>

<style>

? ? .header?{

? ? ? ? border-bottom:?1px?solid?#eee;

? ? }

? ? .left?{

? ? ? ? width:?500px;

? ? }

? ? .left?img?{

? ? ? ? height:?50px;

? ? }

? ? .left?.sy?{

? ? ? ? color:?red;

? ? }

? ? .left?a?{

? ? ? ? padding:?0?10px;

? ? }

? ? .left?.txt?{

? ? ? ? height:?30px;

? ? ? ? padding:?0?10px;

? ? ? ? border-radius:?15px;

? ? ? ? background:?#eee;

? ? }

? ? .left?.txt?input?{

? ? ? ? border:?none;

? ? ? ? background:?transparent;

? ? }

? ? .right?{

? ? ? ? width:?350px;

? ? }

? ? .right?a?{

? ? ? ? color:?#666;

? ? ? ? margin:?0?10px;

? ? }

? ? .right?.zc?{

? ? ? ? height:?30px;

? ? ? ? border:?1px?solid?orange;

? ? ? ? padding:?0?10px;

? ? ? ? line-height:?30px;

? ? ? ? font-size:?13px;

? ? ? ? border-radius:?15px;

? ? ? ? margin-right:?20px;

? ? }

? ? .right?.xwz?{

? ? ? ? height:?30px;

? ? ? ? padding:?0?20px;

? ? ? ? background:?orange;

? ? ? ? line-height:?30px;

? ? ? ? font-size:?13px;

? ? ? ? border-radius:?15px;

? ? ? ? color:?white;

? ? }

</style>

List.vue

<template>

? ? <div?class="list">

? ? ? ? <div?v-for="(item,index) in?list"?:key="index"?class="item flex j-s">

? ? ? ? ? ? <div>

? ? ? ? ? ? ? ? <div?class="title">{{item.title}}</div>

? ? ? ? ? ? ? ? <div?class="desc">{{item.desc}}</div>

? ? ? ? ? ? </div>

? ? ? ? ? ? <div?class="img">

? ? ? ? ? ? ? ? <img?:src="item.imgUrl">

? ? ? ? ? ? </div>

? ? ? ? </div>

? ? </div>

</template>

<script>

? ? export?default?{

? ? ? ? name:?"List",

? ? ? ? props:['list'],

? ? };

</script>

<style?scoped>

.list{

? ? width:?600px;

}

.item{

? ? padding:?10px?5px;

? ? box-sizing:?border-box;

? ? border-bottom:?1px?solid?#eee;

}

.item?img{

? ? width:?140px;

}

.item?.title{

? ? font-weight:?bold;

? ? margin-bottom:?10px;

}

.item?.desc{

? ? font-size:?13px;

? ? color:?#666;

}

.item?.img{

? ? margin-left:?5px;

}

</style>

Recommend.vue

<template>

? ? <div?class="rec">

? ? ? ? <img?src="/images/recom01.png">

? ? ? ? <img?src="/images/recom02.png">

? ? ? ? <img?src="/images/recom03.png">

? ? ? ? <img?src="/images/recom04.png">

? ? </div>

</template>

<script>

? ? export?default?{

? ? ? ? name:?"Recommend"

? ? };

</script>

<style?scoped>

img{

? ? width:?300px;

}

.rec{

? ? width:?260px;

}

</style>