vueJs(2.x)+router+vuex简易博客系统<三>

最新推荐文章于 2022-08-18 23:50:25 发布

joke_shi

最新推荐文章于 2022-08-18 23:50:25 发布

阅读量339

点赞数

分类专栏： vueJs 文章标签： vue-js

本文链接：https://blog.csdn.net/qq_32514043/article/details/78528627

版权

vueJs 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

之前两篇文章已经把vue CLI 介绍的差不多了，并且也做了一些自定义的修改，那么接下来，我们就可以开始coding啦，我们先总结下，我们还欠缺哪些知识点呢？
1、vue.js的一些基础知识
2、router路由的配置
3、vuex的使用(状态管理工具)
以上3点本篇暂时都不讲，本篇先讲讲，如何编写好一个完整的界面，以及拿到项目的时候，该如何划分好通用模块，做到高复用。

分析项目设计图

该图，是截图某位前辈的博客，如有得罪多多包涵。
这里写图片描述
博客首页分析
1. 导航部分(组件)
2. 左侧- 博主介绍(组件)
3. 中间- 文章列表(组件)
4. 右侧- 公告(组件)
5. 右侧- 评论(组件)
6. 右侧- 标签(组件)
7. 右侧- 友情链接(组件)
首页的组件就这些了，首页我们去建立这个界面，在page文件夹下建立”home/index.vue”

<template>
  <div id="wrapper">

  </div>
</template>

<script>
  /* eslint-disable */
  export default{
    name:"homeIndex"
  }
</script>

<style scoped lang="less">
@import "../../style/homeIndex.less";
</style>

这个是界面骨架，我们按照之前分析的组件一个一个编写然后填充进来即可
这里我就不写所有组件了，我就把左侧博主介绍组件贴出来
首先，这个组件以后在文章内容界面也需要复用，所以我们抽取成一个独立组件
在src/components/common/下面建立一个组件(名字取的比较随意)leftSide.vue
我直接把这个组件的代码贴出来，因为还是比较简单的

<template>
  <div id="leftSide">
    <div class="header">
      <img src="../../images/header.jpg" alt="">
    </div>
    <h4 class="info">
      <span>&&</span> -
      <span>**</span> -
      <span>^^</span>
    </h4>
    <div class="hot-tip clearfix">
      <span>前端</span> |
      <span>后台</span>
    </div>
    <div class="position">
      位置：中国：上海
    </div>
    <div class="contract">
      <span class="icon-home2"></span>
      <span class="icon-html-five2"></span>
      <span class="icon-linkedin"></span>
    </div>
  </div>
</template>

<script>
  /* eslint-disable */
export default{
    name:"leftSide"
}
</script>

<style rel="stylesheet/less" lang="less">
  @import "../../style/style.less";
#leftSide{
  width:25%;
  height:440px;
  background:#fff;
  box-shadow: 0 2px 5px #ddd;
  box-sizing: border-box;
  .header{
    width:100px;
    height:100px;
    border-radius: 50%;
    overflow: hidden;
    margin:50px auto;
    img{
      width:100%;
      height:100%;
    }
  }
  .info{
    text-align: center;
    color:#565a5f;
    font-size:30px;
    font-weight: bold;
  }
  .hot-tip{
    text-align: center;
    color:#565a5f;
    font-size:18px;
    line-height:40px;
    margin:20px 0;
  }
  .position{
    text-align: center;
    color:#9a9ea3;
    font-size:13px;
  }
  .contract{
    width:80%;
    border-top:1px solid #ddd;
    margin:30px auto 0;
    text-align: center;
    padding-top:20px;
    span{
      margin-right:15px;
      font-size:20px;
      transition:0.3s all ease;
    }
    span:hover{
      color:red;
    }
  }
}
</style>