springboot-vue前后端分离，博客首页

vue使用的vue-cli3创建的项目

在使用的背景图片时发现css中直接写路径vue提示错误，无法编译成功

查询了发现可以这样配置

vue.config.js中配置

module.exports = {
    devServer: {
      // 跨域配置
        port: 4000,
        proxy: {
            '/api': {
                target: 'http://localhost:8080/api',
                changeOrigin: true,
                ws: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    },
  // css路径配置
    publicPath:process.env.NODE_ENV === 'production'?'/production':'/'
}

这样可以在css直接使用相对路径引用图片

下面开始写博客列表

最开始页面效果时这样的

完成后的效果

页面右边的标签明天在完成

代码如下，供新手参考

<template>
   <el-row class="sharelistBox">
       <div v-if="this.$route.name==='Home'" class="shareTitle">
           <div class="ui label">
               <a :href="'/home?classId='+classId">{{className}}</a>
           </div>
           <ul v-if="sonclassList" class="shareclassTwo" >
               <li v-for="(citem) in sonclassList" :key="citem">
                   <a :href="'#/Share?classId='+classId+'&classtwoId='+citem.class_id" :class="citem.class_id==classtwoId?'active':''">{{citem.cate_name}}</a>
               </li>
           </ul>
       </div>
       <el-col :span="24" class="s-item tcommonBox" v-for="i in 10" :key="i">
           <span class="s-round-date">
               <span class="month">4月</span>
               <span class="day">21</span>
           </span>
           <header>
               <h1>
                   <a :href="'/detail?aid=' + 1">vue博客实战首页实现</a>
               </h1>
           <h2>
               <i class="fa fa-fw fa-user"></i>发表于
               <i class="fa fa-fw fa-clock-o"></i><span v-html="'2020-04-21'"></span> ?
               <i class="fa fa-fw fa-eye"></i>123 次围观 ?
               <i class="fa fa-fw fa-comments"></i>活捉 234 条 ?
               <span class="rateBox">
                        <i class="fa fa-fw fa-heart"></i>22点赞 ?
                        <i class="fa fa-fw fa-star"></i>99收藏
                    </span>
           </h2>
               <div class="ui label">
                   <a :href="'#/Share?classId='+1">博客</a>
               </div>
           </header>
           <div class="article-content">
               <p style="text-indent:2em;">
                   学而思的数独小游戏，H5版本的小游戏，使用vue 构建项目，简单方便，开发打包都超级方便。
               </p>
               <p  >
                   <img :src="tou" alt="" class="maxW">
               </p>
           </div>
           <div class="viewdetail">
               <a class="tcolors-bg" :href="'#/DetailShare?aid='+1" target="_blank">
                   阅读全文>>
               </a>
           </div>
       </el-col>
   </el-row>
</template>

<script>
    import tou from '../assets/img/tou.png'
    export default {
        name: "",
        data() { //选项 / 数据
            return {
                tou:tou,
                artId:0,
                classId:0,
                sendId:'',
                className:'',
                sonclassList:'',//二级分类
                classtwoId:5,
                keywords:'',
                hasMore:true,
                level:1,
                shareClass:[
                   
                ],
                queryClass:1,
                articleList:'',
            }
        },
    }
</script>

<style scoped>
    /**文章列表*/
    .sharelistBox{
        transtion: all 0.5s ease-out;
        font-size: 15px;
    }
    /** 文章列表盒子*/
    .tcommonBox{
        background:#fff;
        white-space: normal;
        word-wrap: break-spaces;
        word-break: break-all;
        position: relative;
        padding: 15px;
        border-radius: 16px;
        margin-bottom: 40px;
        font-size: 15px;
    }
    .tcommonBox header{
        white-space: normal;
        word-wrap: break-spaces;
        word-break: break-all;
    }
    .tcommonBox header h1{
        margin: 10px 0;
        font-size: 25px;
        font-weight: 700;
        text-align: center;
        color:#000;
        line-height: 30px;
    }
    .tcommonBox header h2{
        font-size: 14px;
        line-height: 24px;
        text-align: center;
        font-weight: 700;
        margin: 10px 0;
    }
    .s-round-date{
        top:-20px;
        left:-35px;
        height:60px;
        width:70px;
        background: #64609E;
        position: absolute;
        padding-top:10px;
        border-radius: 100px;
        box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
    }
    .s-round-date span{
        text-align: center;
        display: block;
    }
    .s-round-date .day{
        font-size: 30px;
        font-weight: 700;
    }
    .article-content{
        font-size: 16px;
        white-space: normal;
        word-wrap: break-word;
        word-break: break-all;
        display: flex;
    }

    .article-content p{
        margin:10px 0;
        line-height: 24px;

    }
    .s-item .viewdetail a{
        color:#fff;
        font-size: 12px;
        padding:5px 10px;
        border-radius: 5px;
        background: #97dffd;
    }
    .maxW{
        max-height:300px;
        overflow:hidden;
        text-align:center;
    }
</style>