写在文章前：最近把官网的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上，有兴趣的可以去看下。
<template><!--html结构-->
</template>
<script>//js
</script>
<style>//style
</style>
3.具体页面开发
3.1首页过度也难loading.vue
我们要实现的是一个loading图等待2秒进入artlist列表页
<template><div><img class="loading" src="../img/loading.gif" alt=""></div>
</template>
<script>export default {ready : function() {setTimeout(() => {this.$route.router.go({name : 'artlist'});}, 2000);}}
</script>3.1主题列表页artlist.vue
我们的列表页的结构是这样的：
<template><nv-header></nv-header><div class="artlist"><ul class="artlistTab clearfix"><li v-for="item in itemTab" :class="{'on':initIndex === $index}" v-on:click="changeTab($index)">{{item.title}}</li></ul><div class="artlistCon"><div v-for="art in artlist" class="artitem clearfix" v-link="{name:'article',params:{id:art.id}}"><a class="avatar" href="javascript:void(0);"><img :src="art.author.avatar_url" :alt="art.author.loginname"></a><div class="art-inf"><p class="title">{{art.title}}</p><span>{{art.reply_count}}/{{art.visit_count}}</span><span>{{art.create_at | getDateTime }}</span></div></div></div></div><nv-top></nv-top>
</template>
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() <= totalheight + 200) {this.scroll = false;this.searchKey.limit += 20;this.gerArtlist();}}
}在ready里面绑定下scroll
ready : function() {$(window).on('scroll',() => {this.scrollArtlist();});3.2返回顶部组件
在我们的列表页引入返回顶部组件和头部组件作为子组件
components : {'nv-header' : require('../components/header.vue'),'nv-top' : require('../components/returnTop.vue')
}返回顶部组件returnTop.vue
<template><div class="return-top" v-show="showTop" v-on:click="returnTop"></div>
</template>
<script>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;}}}
</script>
3.3头部组件
<template><!-- 遮罩层 --><div class="page-cover" v-show="coverShow" v-on:click="hideMenu"></div><!-- 头部 --><div class="header"><span class="left-menu" v-on:click="showMenu"></span>cnode.js</div><nv-menu :showm="menuShow"></nv-menu>
</template>
<script>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')}}
</script>在我们的header组件中我们引入了一个menu组件，props : ['showm']利用父子组件间的通信，给meun绑定了个:class="{'showMeun':showm}"利用css3来实现过渡
<template><div class="meun" :class="{'showMeun':showm}"><ul><li v-link="{name:'home'}">首页</li><li v-link="{name : 'search'}">搜索</li><li v-link="{name : 'login'}">登录</li><li v-link="{name : 'login'}">注册</li><li v-link="{name : 'about'}">关于</li></ul></div>
</template>
<script>export default {props : ['showm']}
</script>
<style lang="sass">.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);}
</style>
结束语
由于是空闲的时间做的，所以只实现了部分功能，后面会继续完善，源码已经放在github
