vue-cli搭建cnode社区

一、准备工作

1.使用vue-­cli脚手架搭建项目，参考我的文章：使用使用vue-­cli脚手架搭建项目
2.安装一些需要的插件：cnpm install axios github-markdown-css
3.在main.js文件引入要全局使用的插件：

import Axios from 'axios'
import 'github-markdown-css'
Vue.prototype.$http=Axios  //将Axios添加到全局vue的原型

二、页面和组件：

1.共建立三个页面：发布清单页（首页）、文章详情页、用户信息页。
2.在src/components中共创建7个组件：
Header(头部)、Footer(脚步)为三个页面的共有组件，构成页面的上下部分；
PostList(列表)为发布清单页的主体部分，Pagination(分页)为发布清单页的分页栏部分；
Ariticle(文章)为文章详情页的主体部分，SideBar(侧边栏)为文章详情页的右侧部分；
UserInfor为用户信息页的主体部分；

三、axios

1.创建axios请求，参考我的文章：vue.js中axios的使用

2. 字符串拼接：

this.$http.get(`https://cnodejs.org/api/v1/topic/${this.$route.params.id}`,)

在PostList和SideBar两个组件的axios中都使用了es6语法拼接字符串

四、vue-router

1. 构建vue-router，参考我的文章：vue-router的使用
2. 解决同一路由不同参数下，发生的组件复用，导致的页面不更新，可以使用路由监听。

五、组件通信：

1. PostList(父组件)通过props向Pagenation(子组件)传送了数据totalPage。
2. Pagenation(子组件)通过自定义事件向PostList(父组件)传送了数据currentPage。
3. 组件通信的方法，参考我的文章：vue.js中的组件通信

六、Pagenation

Pagenation组件中用到了三个重要的函数：

1. 设置分页按钮

setpagebtns() {              
        if (this.totalPage >= 5) {
            this.pagebtns = [1,2,3,4,5];
            this.moreNext = true;   
        } else {
            for (var i=this.totalPage;i > 0;i--) {
                this.pagebtns.unshift(i);
            };
        };
      if (this.currentPage !== 1) {
        console.log(this.currentPage)
        this.changePageBtns();
      }
    },

2. 处理分页按钮

changePageBtns() {
      if (this.totalPage < 5) return;
      this.morePrevious = this.currentPage > 3 ? true : false;
      this.moreNext = this.currentPage < (this.totalPage -2) ? true : false;
      if (this.currentPage > 3 && this.currentPage < (this.totalPage -2)) {
        this.pagebtns = [this.currentPage-2,this.currentPage-1,this.currentPage,this.currentPage+1,this.currentPage+2,];
        console.log(this.pagebtns); 
      } else if (this.currentPage <= 3){
        this.pagebtns = [1,2,3,4,5,];
        // console.log(this.pagebtns);
      } else if (this.currentPage >= this.totalPage -2){
        this.pagebtns = [this.totalPage-4,this.totalPage-3,this.totalPage-2,this.totalPage-1,this.totalPage,];
        // console.log(this.pagebtns);
      };
    },

3. 处理当前页

changepage(page) {
        //处理当前页
        if (page === this.currentPage) return;
        if (0 < page && page <= this.totalPage) {
            this.currentPage = page;
        } else if (page <= 0) { 
            this.currentPage = 1;
        } else if (page > this.totalPage) {
            this.currentPage = this.totalPage
        };
        //处理分页按钮
        this.changePageBtns();
      // 保存当前页到session并发送给父组件
      sessionStorage.setItem('localCurrentPage',this.currentPage);
      this.$emit('sendPage',this.currentPage);
    },

七、遇到的其它问题

1. Ariticle组件中markdown内容的样式混乱。
   解决方案：
   (1)安装插件：cnpm install github-markdown-css
   (2)引入插件：import 'github-markdown-css'
   (3)使用：在要使用markdown样式的块级元素中添加markdown-body类名。
2. 当页面刷新时，PostList中的当前页(page)会被重置为1，而不是用户已经浏览到的页面。
   解决方案：
   (1)使用sessionStorage设置并保存变量localPage：
   sessionStorage.setItem('localPage',this.page)
   (2)在挂载开始之前将变量localPage赋值给page：
   this.page = parseInt(sessionStorage.getItem('localPage')) || 1;

源码地址
预览地址