Vue.js技术栈搭建CNODE社区

关键词：

Vue.js文档、Promise、jquery、webpack、npm、vue-­cli、vue-router

一 、cnode社区的基本构架

组件：
Header 头部
PosltList 列表
Article 文章的详情页
SlideBar 侧边栏
UserInfo 用户个人信息
Psgination 分页组件

二 、从头开始

我们先做出大概效果，接收和反馈数据数据

2.1 Header组件

Header组件

首先搭建好vue-­cli，进入编辑器

• 将demo中要用到的图片和logo都存入assets文件夹中，如图
• 创建一个Header组件，用img标签引入存储在assets文件中的logo
• 在li标签分别写出：新手入门、API、关于、注册、登录
• 将组件引入App.vue，就可以在页面显示

• 在data中定义pagebtns，如：pagebtns:[1,2,3,4,5,'......'],在模板中由v-for来遍历，然后在定义个changBtn方法，点击时实现需要的功能，此段需要引入jquery，用switch判定点击上一页、下一页、首页该做什么事

• 最后，因为Psgination组件是定义在PostList组件中，所以是子组件向父组件传递数据，所以这里需要用到，自定义事件，用Vue中的方法this.$emit('handleList',this.currentPage)
  再在PostList组件中定义出handleList方法即可，在给出我的PostList组件最后的代码：

三、大结局

写到这里，模拟cnode社区基本写完了，后面便是一些自己想要的功能，可以自行添加-----------The early bird catches the worm