main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router/index'
Vue.config.productionTip = false
new Vue({
? render: h => h(App),
? router
}).$mount('#app')
路由配置
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../page/Home.vue'
import Detail from '../page/Detail.vue'
Vue.use(VueRouter)
let router = new VueRouter({
routes:[
? ? {
? ? ? ? path:'/',
? ? ? ? component:Home
? ? },
? ? {
? ? ? ? path:'/detail/:id',
? ? ? ? props:true,
? ? ? ? component:Detail
? ? }
]
})
export default router
APP.vue
<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;
}
a{
? ? color: black;
}
#app {
? /* width: 1200px; */
? /* margin: 0 auto; */
? /* border: 1px solid #ccc; */
}
</style>
Header.vue
<template>
? <div class="head flex j-s a-c">
? ? <img class="img1" src="/image/index/message.png" alt="" />
? ? <div class="center flex a-c j-c">
? ? ? <img class="img2" src="/image/index/wap_logo.png" alt="" />
? ? ? <img class="img3" src="/image/index/titlebar_refresh.png" alt="" />
? ? </div>
? ? <img class="img1" src="/image/index/search_normal.png" alt="" />
? </div>
</template>
<script>
export default {
? name: "Header",
};
</script>
<style scoped>
.head {
? ? width: 100vw;
? height: 40px;
? background-color: #d33d3e;
? position: fixed;
? top: 0;
? left: 0;
}
.head .center {
? flex: 1;
}
.img1{
? ? width: 36px;
}
.head .img2{
? ? width: 122px;
}
.head .img3{
? ? width: 24px;
}
</style>
news.vue?
?
<template>
<div class="news">
? ? <router-link :to="`/detail/${item.id}`" v-for="(item,index) in news" :key="index">
? ? ? ? <div class="flex item j-s a-c">
? ? ? ? <div class="left">
? ? ? ? ? ? <div class="title">{{item.title}}</div>
? ? ? ? ? ? <div class="flex">
? ? ? ? ? ? ? ? <div class="zd">置顶</div>
? ? ? ? ? ? ? ? <div class="pl">{{item.from}}</div>
? ? ? ? ? ? ? ? <div class="pl">评论 {{item.commentLength}}</div>
? ? ? ? ? ? </div>
? ? ? ? </div>
? ? ? ? <div class="right">
? ? ? ? ? ? <img :src="item.img">
? ? ? ? </div>
? ? </div>
? ? </router-link>
</div>
</template>
<script>
import axios from 'axios'
export default {
name:'News',
data() {
? ? return {
? ? ? ? news:[]
? ? }
},
created() {
? ? axios.get('/data/data.json').then(({data})=>{
? ? ? ? this.news = data
? ? ? ? // console.log(this.news);
? ? })
},
}
</script>
<style scoped>
.news{
? ? padding: 5px 10px;
? ? margin-top: 40px;
}
.item{
? ? border-bottom: 1px solid #eee;
? ? padding: 10px 0;
}
.title{
? ? margin-bottom: 5px;
}
.zd{
? ? border: 1px solid #d33d3e;
? ? color: #d33d3e;
? ? padding: 0 2px;
? ? font-size: 12px;
}
.pl{
? ? color: #666;
? ? font-size: 12px;
? ? margin: 0 4px;
}
.right img{
? ? width: 100px;
}
</style>
detail.vue
?
<template>
? <div class="detail">
? ? <div class="title">{{ item.title }}</div>
? ? <div class="flex a-c">
? ? ? <img class="logo" src="/image/datails/author.jpg" />
? ? ? <div class="center" style="margin-left: 10px">
? ? ? ? <div class="from">{{ item.from }}</div>
? ? ? ? <div class="time flex a-c">
? ? ? ? ? {{ item.time | filterTime }}<span>评论{{ item.commentLength }}</span>
? ? ? ? ? <div class="btn">关注</div>
? ? ? ? </div>
? ? ? </div>
? ? </div>
? ? <div v-html="item.content"></div>
? </div>
</template>
<script>
import axios from "axios";
// import moment from "moment";
import wfl from '../utils/wfl.js'
// console.log(moment);
export default {
? name: "Detail",
? props: ["id"],
? data() {
? ? return {
? ? ? item: {},
? ? };
? },
? created() {
? ? axios.get("/data/data.json").then(({ data }) => {
? ? ? this.item = data.find((r) => r.id === this.id);
? ? ? // console.log(this.item);
? ? });
? },
? filters: {
? ? filterTime(val) {
? ? ? return wfl.formatData(val)
? ? },
? },
};
</script>
<style scoped>
.detail {
? padding: 10px;
}
.title {
? font-weight: bold;
? font-size: 20px;
}
.logo {
? width: 30px;
? border-radius: 50%;
}
.center {
? padding: 5px 0;
}
.from {
? font-size: 14px;
? font-weight: bold;
}
.time {
? font-size: 12px;
}
.time span {
? margin-left: 2px;
? color: #f85a59;
}
.btn {
? font-size: 14px;
? height: 25px;
? width: 40px;
? text-align: center;
? line-height: 25px;
? padding: 2px 10px;
? color: white;
? background-color: #f85a59;
? margin-left: 10px;
}
</style>
?Home.vue
?
<template>
<div>
? ? <Header></Header>
? ? <News></News>
</div>
</template>
<script>
import Header from '../components/Header.vue'
import News from '../components/News.vue'
export default {
name:'Home',
components:{
? ? Header,
? ? News
}
}
</script>
<style scoped>
</style>
wfl.js
?
let formatData = (val, now = new Date) => {
? ? let time = now - new Date(val)
? ? return parseInt(time / 1000 / 60 / 60) + '小时前'
}
export default{
? ? formatData
}
?
?
?