一个用vue-cli vue-router2.1 vue 2.1 vuex2.1 echarts统计 express 的 时间轴 记录每天活动

界面还挺好看的... 可以记录每天的点点滴滴...

1.使用 express 作为服务器

2.fs 模块 fs.writeFileSync 随机写入模拟数据

3.vuex 包括 states 存储数据 actions 触发方法(比如异步请求可以放在这里, 成功后在submit改变数据)  mutations 同步改变states数据

vuex 用保持一些全局的数据 和 状态,  方便调用不同数据的方法, 易于找到数据改变的源头, 和数据状态的跟踪调试

4. webpack配置比较全, 使用vue-cli构建的, vue-cli 有些复杂, 需要研究, 才能自行增加, 更改配置, 如果有需要

5. 使用jade 模板, 这个模板简洁, 但容易出错, 用好得多了解这个模板介绍

6. 使用 Echarts 还是比较简单, 先 npm 安装, 然后再模块中引入 特定的图表 import Echarts from 'echarts/lib/echarts'

再mouted周期调用 Echart.init方法 初始化页面, option是echart格式的数据源

let chart = Echarts.init(document.querySelector('#bar-chart-year'))

chart.setOption(option)

7. 首页星星飘动效果, 是用canvas绘制的,  用es6 的 class 定义出 一个星星类 Star,

这个类包含了星星的属性: 半径, 位置, 透明度  ; 和星星的动作: move 不断让它的y 和 alpha 变小

用另个Startflow 类 的构造器中 创建 不同大小的星星,

然后在方法 flowing 用 window.requestAnimationFrame 循环

清空画布, 渲染画布的动作, 看起来有动态效果

这个方法写的还是不错的, 思路很清晰

8. devtool: '#eval-source-map' 在开发模式 webpack 配置这个

可以看到会生成一个webpack:// 目录, 在控制台可以调试原生的代码

9. 后台采用express作为服务器, mvc结构, 分别是数据的读取 存储 更新,  视图(webpack生成),  http请求处理

这部分需要了解 express-session 的配置, 和路径的配置

10. router配置相对简单, 就普通的json格式, 填写path 和对应的component就可以

router.beforeEach((to, from, next) => { // 对特定路径进行验证，增强锁屏功能
if (to.path === '/') {
next('/auth')
} else if (to.path === '/auth' && !store.state.lockScreen) {

//如果调到验证页面, 而且没有锁屏, 则跳到主页面
next('/main')
} else if (to.path !== '/auth' && store.state.lockScreen) {

// 任何其他页面跳转, 如果已经锁屏, 都要去验证页面
next('/auth')
} else {
next()
}
})

11. 切换组件 还有 日期组件, 暂时没找到....

https://github.com/hongchh/timeline-x

http://www.qdfuns.com/notes/40585/b4d9eff4ea2a6aff3265b742ad9d57f4.html

http://blog.csdn.net/hongchh/article/details/54744318