用vue+webpack+es6+sass实现Cnode网站(一)
写在文章前:最近把官网的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); }
结束语
由于是空闲的时间做的,所以只实现了部分功能,后面会继续完善,源码已经放在github
关键字:spa, es6, sass, vue.js
版权声明
本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!