用vue+webpack+es6+sass实现Cnode网站(一)

2016-07-18 00:11:00

写在文章前：最近把官网的vue文档过了一遍，准备写个项目来巩固下自己对vue的学习。因为cnode网站有开放的api，所以我决定用vue+webpack+es6+sass的技术栈去实现这个网站(单页面的形式)。这篇系列的文章我主要是分享下自己怎么开发还有怎么实现一个个vue组件去构建整个网站。关于webpack配合vue的使用可以关注我的另外一篇博文webpack+vue配置,感谢Cnode网站提供的开放API。

建议阅读前准备内容

单页面应用
路由vue-router文档
webpack+vue配置

1. 构建我们的项目目录

├── README.md          ├── index.html         // 项目入口文件├── package.json       // 项目配置文件├── src                // 生产目录│   ├── vue            // 组件│   |    ├──about.vue│   |    ├──artlist.vue│   |    ├──article.vue│   |    ├──login.vue│   |    ├──loading.vue│   |    ├──search.vue│   ├── components     // 各种子组件│   |    ├──header.vue│   |    ├──returnTop.vue│   |    ├──menu.vue│   ├── js             // 外部引入的js文件│   ├── scss           //scss文件│   ├── img           //图片文件│   ├── filters.js     //过滤器│   └── main.js        // Webpack 预编译入口    └── webpack.js          // Webpack 配置文件

2.今天要实现的一个效果

在上面的gif动画中我们总共看到了几个页面

loading.vue(首页过渡加载)
artlist.vue(列表展示页)
几个组件
header.vue(头部)
meun.vue(菜单栏)
returnTop.vue(返回顶部)

在正式内容开始前先简单的说下，我们看到的一个页面是由各个组件组成的，而我们可以把页面拆分成一个各个组件，每个组件单独一个文件，组件的结构是这样的，避免内容过多下面讲到的组件我都不写style，具体代码开源在了 github上，有兴趣的可以去看下。

    //js    //style

3.具体页面开发

3.1首页过度也难loading.vue

我们要实现的是一个loading图等待2秒进入artlist列表页

     export default {          ready : function() {               setTimeout(() => {                    this.$route.router.go({name : 'artlist'});               }, 2000);          }     }

3.1主题列表页artlist.vue

我们的列表页的结构是这样的：

               {{item.title}}                         {{art.title}}                         {{art.reply_count}}/{{art.visit_count}}                         {{art.create_at | getDateTime }}

tab主题导航的渲染
我们把列表的导航加载进来，官方API的有主体分类ask，share，job，good
所以得出我们的数据itemTab。

itemTab : [      {'title' : '全部', 'type' : 'all'},      {'title' : '精华', 'type' : 'good'},      {'title' : '分享', 'type' : 'share'},      {'title' : '问答', 'type' : 'ask'},      {'title' : '招聘', 'type' : 'job'}]

然后在定义一个输出请求接口的对象：

searchKey : {     page : 1,     limit : 20, //每页加载20条     tab : 'all' //主题 有all ask share job good}

顺便再定义哥artilist[]空数组来存放等下取出来的数据。

我们要先定义拉取数据的方法函数，我们把拉取到的数据列表放在我们先前定义的artlist[]数组里面，利用vue的双向绑定的特性配合v-for我们就可以把我们的列表页的主题内容渲染出来了。

//获取数据方法gerArtlist : function() {    let rqdata = $.param(this.searchKey);    $.get('https://cnodejs.org/api/v1/topics?' + rqdata, (data) => {         if(data.success){              this.artlist = data['data'];              this.scroll = true;         }    })

}
页面刚打开的时候我们要去取第一次的数据

ready : function() {   this.gerArtlist(this.initIndex); });

切换主题的时候我们要给每个item绑定一个事件changeTab($index)，利用$index这个索引，改变我们this.searchKey.tab在去请求数据

// 标签tab切换方法changeTab : function(index) {    this.initIndex = index;    this.searchKey.tab = this.itemTab[index].type;    this.artlist = [];    this.searchKey.limit = 20;    this.gerArtlist(this.initIndex);}

我们设置的是当前页面打开的时候加载了20条数据，现在我们要实现下拉，超过了一定的区域在去请求下一个20条的内容，就是改变searchKey.limit，每次触发下拉条件就叠加20.

// 超过滚动获取数据方法scrollArtlist : function() {    if(this.scroll){         let totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop());         if ($(document).height()  {        this.scrollArtlist(); });

3.2返回顶部组件
在我们的列表页引入返回顶部组件和头部组件作为子组件

components : {    'nv-header' : require('../components/header.vue'),    'nv-top' : require('../components/returnTop.vue')}

返回顶部组件returnTop.vue

    export default {        data : function() {            return {                showTop : false            }        },        ready : function() {            $(window).on('scroll', () => {                if($(window).scrollTop() > 150){                    this.showTop = true;                }else{                    this.showTop = false;                }                })        },        methods : {            returnTop : function() {                $(window).scrollTop(0);                this.showTop = false;            }        }    }

3.3头部组件

        cnode.js    export default {        data : function() {            return {                coverShow : false,                menuShow : false            }        },        methods : {            showMenu : function() {                this.coverShow = true;                this.menuShow = true;            },            hideMenu : function() {                this.coverShow = false;                this.menuShow = false;            }        },        components : {            'nv-menu' : require('./menu.vue')        }    }

在我们的header组件中我们引入了一个menu组件，props : ['showm']利用父子组件间的通信，给meun绑定了个:class="{'showMeun':showm}"利用css3来实现过渡

            首页            搜索            登录            注册            关于    export default {        props : ['showm']    }    .meun {        position: fixed;        top: 0px;        left:-200px;        width: 200px;        height: 100%;        background: # 444444;        transition: all .3s ease;        z-index: 99;        ul {            padding-top: 3rem;            li {                color: # fff;                padding: 16px 0;                text-align: left;                text-indent: 10px;                line-height: 20px;                font-size: 20px;                margin: 0 25px;            }        }    }    .showMeun {        transform: translateX(200px);    }