一、为什么要仿cnode社区？
需要练习vue的相关知识点，比如计算属性、事件绑定、vue-router路由的跳转与监听等，进行一个综合的练习。cnode社区提供开放的api，可以进行前后端分离的开发。只需要利用axios请求数据，处理数据，展示数据即可。在此将遇到的一些问题，做一个梳理。
二、分析
文件结构
main.js //程序入口文件App.vue //页面的入口文件（跟组件）router/index.js //路由配置文件components //vue公共组件assets //资源目录
API相关：
能拿到的数据：API：
１．主题首页get/topicshttps://cnodejs.org/api/v1/topics
参数： page Number页数 limit Number每页数量 success: true data: id author_id tab: share\good\ask\job //分类
content:内容 title: 标题
reply_count/visit_count: 回复/浏览量
author: loginname //名字
avatar_url //头像对应的标签
last_reply_at: 最后的回复时间
２．主题详情:get/topic/:id（也就是我们进入主题详情页的时候，需要传入id）
３．用户get/user/:loginname loginname avatar_url // create_at score //积分 recent_topics //最近主题
cnode组件分析
Header //头部
PostList //论坛列表
Article //文章(底部带有回复）
SlideBar //进入，文章详情页后，存在侧边栏
userinfo //存在侧边栏
Pagination //页码
三、问题
１．命名路由&命名视图的使用
需求：我们在进入首页的时候，页面整体结构分为两部分，Header以及PostList，但是当我们进入文章详情页或者用户信息页的时候，页面就会变成三部分，Header以及其下方的左侧列表和右侧侧边栏。
这个时候就需要用命名视图来解决这个问题。
<Header></Header>
<div class="main">
<router-view name="main"></router-view>
<router-view name="slidebar"></router-view>
</div></pre>
２．路由传参
需求：当我们点击首页任何一个文章的时候，需要跳转到相应的文章，我们肯定需要对应文章的ID，这时候就需要传参。分为两步：
第一步：我们肯定在router中需要配置
{
path: '/user/:userId',
name:'user'
}
第二步：我们需要给router-link的to属性传递一个带有参数的对象
<router-link :to={name:'user',parmas:{ userId: 123}}>
User
<router-link>
这时候就可以导航到/user/123
３．axios的使用
４．过滤器的使用：demo
从解析后的数据可以得到：
最近回复时间为"last_reply_at":"2018-10-31T11:02:54.656Z"我们获得的是最后的回复时间，而我们实际需要的是类似”３分钟前“这种形式。那么我们就需要shifang把时间做一个处理，首先转化为毫秒，接下来转化为时间差，进行计算即可。
formatDate的实现
Vue.filter('xxx',(value)=>{
let lastDate = new Date(value)
let newDate = app.date
let time = (Date.parse(newDate)-Date.parse(lastDate))/1000
if(time<60){
return '刚刚'
}else if(time<3600){
return parseInt(time/60)+'分钟前'
}else if(time<86488){
return parseInt(time/3600)+'小时前'
}else if(time<2678400){
return parseInt(time/86488)+'天前'
}else if(time<32140800){
return parseInt(time/2678400)+'月前'
}
})
５．生命周期
在这个例子中，需要获取数据，但是在什么时候获取数据呢？
在这里做一个区分：
beforeCreate 实例初始化之后，数据和时间配置之前，可用于初始化非响应式变量
created 已将data和methods挂载到vue实例上，可初始化ajax请求
beforeMount 模板编译完成，但未挂载，无法获取dom
mounted 组件挂载完成，能直接获取dom
beforeUpdate
updated 组件内响应式变量变更时调用
beforeDestory
destroyed 组件销毁，状态存储以及内存释放
四、总结
做完整个项目，对vue的实例属性、class的动态绑定，列表渲染、组件注册、自定义事件等知识有了更深的认识，对很多知识还比较模糊，在下一个练习中继续学习～
