说在最前面

这是我自己的一个练手的项目，基于模仿简书，基本还原了许多，许多重复的我就没有再去写。关于css方面写的可能有些复杂。想大家可以互相交流一下。哪里写的不好的麻烦指正一下

项目演示地址：www.chentongxue.top

源码地址：gitee.com/wu_yi_chen/…

第一项目结构

public 文件下放的事一些图片和Mock的数据
assets 静态文件 iconfont等
components 组件可以复用的
plugins 插件例如elements-ui
router 路由管理
store Vuex
views 页面级别组件例如登陆页面，首页等

第二使用的插件

VueCookie Vue处理cookie
axios Vueaxios 发送请求 Vueaxios是挂载，方便一些
element-ui UI库，本次只使用了响应式
vue-aswsome-swiper 轮播图组件
vue-infinite-scroll 无线滚动
scss CSS的编译器
mavon-editor 基于Vue的markdown编辑器

第三项目分析

用户头像

首先在简书页面中，可以看到使用最多的就是

所以我们可以把它写在common.css中

.user-img{
  display: block;
  width: 50px;
  height: 50px;
  overflow: hidden;
  border-radius: 50%;
  float: left; /* 每个人写法不一样 个人更喜欢用 flex */
  margin-right: 10px;
  img{
    width: 100%;
    height: 100%;
  }
}

文章列表

在详情页面和主页面中，都会一个文章列表的存在。个人主页中也会存在。所以我们最好可以把他写成一个组件，可以减少代码量，也方便使用代码在 Components/ArticleList

Header 组件

大家会发现有很多页面都会有header，所以我们可以在设置路由的时候，设置header路由之时，设置子元素，

我的实现方式，设置了一个Home组件

在设置路由的时候这样设置。

个人在开发中遇到的一些坑点

打包后mock数据找不到，把路径写成绝对路径
在做消息界面的时候，想把它设计成一个通用组件。但遇到了一些问题，个人的解决方法写道了代码里的，如果哪里不太理解的或者其他，可以留言。有更好的意见的，还请指教
其他的目前我觉得我还能够解决，MarkDown编译器哪里可能有点问题，大家可以去github上看使用说明就好

写到最后

个人觉得写的还是一般，如果大家有什么意见。可以留言，我会尽力的去修改

Vue实现简书的大部分功能

说在最前面

第一 项目结构

第二 使用的插件

第三 项目分析