Vue 02 博客列表显示

02 博客列表显示

效果图

1. 依赖

vue

vue-router

element-ui

less less-loader

npm install vue-router
npm install less less-loader
npm install --save element-ui

2. Vue.use(element)

// 添加element-ui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

3. bloglist.vue

定义数据体：article(id, title, description, type{id, name}, readCnt, likeCnt, createTime…)

<script>
    export default {
        name: "bloglist",
        data() {
            return {
                user: {
                    id: 1,
                    name: 'Hukor'
                },
                articleList: [
                    {
                        id: 1,
                        title: 'Hello World',
                        description: '第一篇博客，Hello World',
                        type: {name: 'Java'},

                        readCnt: 101,
                        likeCnt: 10,
                        createTime: '2020-11-27 20:00:00'
                    },
                    {
                        id: 2,
                        title: 'Vue Blog List',
                        description: '第二篇博客，Vue Blog List Page',
                        type: {name: 'Vue'},

                        readCnt: 88,
                        likeCnt: 20,
                        createTime: '2020-11-27 20:00:00'
                    }
                ]
            }
        }
    }
</script>

定义列表显示：标题、描述、查看+评论+赞+创建时间

<template>
    <div class="blogs">
        <ul class="list">
            <li v-for="item in articleList" :key="user.id + item.id" class="item">
                <el-link :underline="false" href="www.baidu.com">
                    <div class="content">
                        <h4 class="title">{{item.title}}</h4>
                        <p class="description">{{item.description}}</p>
                        <div class="meta">
                            <span>查看 {{item.readCnt}}</span>
                            <span>评论 {{item.likeCnt}}</span>
                            <span>赞 {{item.likeCnt}}</span>
                            <span v-if="item.createTime" class="time">{{item.createTime}}</span>
                        </div>
                    </div>
                </el-link>
            </li>
        </ul>
    </div>
</template>

样式

<style lang="less" scoped>
    .blogs {
        /*左对齐*/
        text-align: left;
        li {
            /*去除起前面的点*/
            list-style-type: none;
            /*内部间距*/
            padding: 15px 0 10px;
            /*每篇下面的实线*/
            border-bottom: 2px solid #f0f0f0;
            /*标题，鼠标，悬浮，变绿色*/
            &:hover {
                .title {
                    color: #42b983;
                }
            }
            /**/
            .description {
                min-height: 30px;
                margin: 4px 0 4px;
                font-size: 18px;
                color: #555;
            }
            .meta {
                font-size: 13px;
                line-height: 20px;
                span {
                    margin-right: 12px;
                    color: #666;
                }
            }
        }
        .title {
            color: #333;
            margin: 7px 0 7px;
            font-size: 28px;
            line-height: 1.5;
        }
    }
</style>

4. 添加router.js

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

import bloglist from "@/components/bloglist";

export const constantRouterMap = [
    {
        path: '/blog/list',
        name: 'bloglist',
        component: bloglist
    }
]

export default new Router({
    // mode: 'hash',
    mode: 'history',
    scrollBehavior: () => ({ y: 0 }),
    baseUrl: 'http://localhost:8081/api',
    routes: constantRouterMap
})

注册？

import router from "@/router/router";

new Vue({
  render: h => h(App),
  // 添加到这儿
  router
}).$mount('#app')

5. App.vue

修改template和export

• 添加<router-view>
• 添加components

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
import bloglist from './components/bloglist'

export default {
  name: 'App',
  components: {
    bloglist
  }
}
</script>

参考

布局和样式，https://github.com/eshengsky/iBlog