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"></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"></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>