分享给 vue 入门练手者的 todo list, 初级入坑必选……

非常适合vue初级入坑的同学…… 整体结构简单,清晰明了。

主要使用了koa2 + vue 完成的一个基本的todo list。
目前只有基础的功能, 添加,标记完成,删除。

git 地址

欢迎star。

https://github.com/tangdaohai/todo-list-vue

先上图片,gif效果不太好有卡顿……

《分享给 vue 入门练手者的 todo list, 初级入坑必选……》

服务端

没有使用webpack-dev-server这个插件,个人不太喜欢这种方式。

使用了 koa2 + kao-webpack-dev-middle,kao-webpack-hot-middle 去完成启动服务与打包文件并热加载。

vue

两个模块一个input,一个list,list使用了vue transition模块有几小动画效果。

两个模块通过vuex Store关联一起。 input commit mutations 给 store。 数据变更后自动触发 computed 相关的数据进行更新元素。

没有异步运算或者请求所以未用到action

页面使用了flex布局,个人非常喜欢这个,用起来比较爽。

webpack 相关就不说了……

小结

整个项目虽小,但都是按照vue官方建议的规范去写,个人感觉代码规范性上还是不错的……(不要喷我哦……)

这个项目有很多练手的扩展性

  1. 利用local Storage去缓存数据,持久化到本地。

  2. 在后端加mongo或者`mysql。

以上,致那颗骚动的心……
    原文作者:悠扬小Q
    原文地址: https://segmentfault.com/a/1190000008473005
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞