1、 状态管理用于存储接口获取到的数据和多组件共用的值，使用分模块modules和状态获取getters，目录架构如下图：
2、 文件classify存放栏目数据，可根据实际情况调整，里面的title文字要对应接口的类型，代码如下图：
3、 文件home存放跟首页有关的获取接口数据和共用值，代码如下图（分析重点代码）：
1.state-newsList的值，如果没有缓存值，则获取classify前12个栏目（newsList.slice(0, 12)）；
2.方法addHomeTag用于点击增加栏目，点击会先判断是否存在重复(state.newsList.every(tag => tag.title !== news.title))，如果不重复才添加（注意删除list的数据，因为Local.set有长度限制）；
3.方法delHomeTag用于点击删除栏目，删除过程会校验长度（(state.newsList.length > 1)），如果只剩一个则不能删除，不然会导致显示空白；
4.方法getHomeList根据articleType获取相应栏目的列表数据；
5.方法getArticle根据articleId获取相应文章的详情页信息；
6.方法updateArticle根据传入的参数params更新文章的相应数据；
7.方法getCommentRecord根据传入的参数params获取到相应文章的所有评论信息；
8.方法saveComment用于保存评论数据到对应的文章。
4、 文件search存放跟搜索页面有关的获取接口数据和共用值，代码如下图（分析重点代码）：
1.方法getSearchList根据传入的参数params获取列表数据，由于列表支持加载更多功能，有几点需要注意：
1）当搜索跳到页面（params.page === 1）时，需设置state.loadingMore = false（不然会导致无法加载），并且清空原列表的数据state.list（不然会导致第二次搜索显示多旧数据）；
2）当res.totalNumber === 0表示无数据，设置显示无数据提示state.isShowNodata = true；
3）当searchList.length < 10表示加载页已经是最后一页，设置不能继续加载state.loadingMore = true；
4）当searchList.length < 10 && searchList.length > 0表示有数据但是已经是最后一页，设置显示无数据可加载的提示信息state.end = true；
5）由于允许加载更多，列表的数据使用合并state.list.concat(searchs.list)。
5、 文件user存放跟用户有关的获取接口数据和共用值，这里暂时存储底部栏目信息footerBarList，代码如下图：
1.属性title用来设置栏目名；
2.属性icon对应iconfont的svg图标名；
3.属性path用来设置点击跳转的路径。
Tips：最后一个栏目分两种情况，未登录时，栏目名为 未登录，显示对应未登录图标account；登录后，栏目名为 我的，显示对应已登录图标account1。
6、 文件video存放跟视频\小视频页面有关的获取接口数据和共用值，代码如下图（分析重点代码）：
1.方法“getVideoList”根据传入的参数“params”获取列表数据，功能类似“search”；
2.方法“updateVideo”用来更新播放次数。
7、 文件getters用来存放状态获取，代码如下图：
1、 页面由三部分组件组成，头部HeaderBar、内容页router-view和底部FooterBar，由于栏目 首页、视频和小视频排版一样，所以在router-index.js使用children,这样切换这三个栏目，只需要重新渲染内容页数据，有利于提高速度；而栏目 我的 由于差异比较大，需要整个页面重新渲染；代码如下图（分析重点代码）：
1.组件TopBarBox用于栏目页面，后面具体分析；
2.方法closeDialog用于关闭栏目页时，内容页显示第一个栏目的数据。
1、 头部代码如下图（分析重点代码）：
1.template比较简单，就显示一个图标Icon+输入框input，input为只读状态；
2.方法skipSearch用于点击input跳转到搜索页 /search；
3.searchTitle获取当前栏目的第一个标题state.searchTitle = list[0].articleTitle（对照图3）显示于搜索框提示信息，栏目没数据则显示空白。
4.style注意theme-red和header-search-color，这些参数都是由common.less设置。
2、 搜索页/search的template和style代码和效果如下图：
1.template的search-head-wrapper包含input搜索框search-title（可进行搜索显示列表）和guess，guess包括猜你想搜的列表search-menu（数据由循环数组keywordList显示）和历史记录（数据由循环数组historyList显示，该数组自动添加搜索的数据）；
2.template的search-body-wrapper显示搜索出来的列表数据。
3、 搜索页/search的script代码如下图（分析重点代码）：
1.加载页面时（created），获取缓存的值，用于渲染搜索历史记录表；
2.每次进入页面都触发activated，来显示猜想内容和清空搜索框的内容；
3.方法changeState用来输入数据则显示搜索框后面的 X，清空则不显示，由于输入就触发，所以使用“@input”；
4.方法search用来点击 确定（@keyup.enter）时候才开始搜索，点击 确定 后执行this.$store.dispatch('getSearchList', { keyword: keyword, page: 1 })显示搜索的列表数据；然后添加输入数据到历史记录表（this.historyList.push(keyword)）；
5.方法clearKeyword用来点击图标 X 清空输入框的数据（this.$store.state.search.keyword = ''）、隐藏图标和显示猜想内容+历史记录；
6.方法getSearchData原理跟search一样；
7.方法loadingMore用来往上拖动显示更多数据，原理就是每次往上拖动页数加1（this.page++），然后执行语句“this.$store.dispatch('getSearchList', { keyword: this.keyword, page: this.page })”，查询该页数据并合并前面的列表数据组成一个新数组，从而实现加载更多（调用store-search-getSearchList方法）。
1、 底部代码如下图（分析重点代码）：
1.template的router-link循环显示数组footerBarList的内容（title、icon和path），且渲染成标签li。
