TOC
展示
为了更好的学习vue，所以找个一个todoList的渲染图，动手制作一个todoApp。因为渲染图是纯移动端的，所以我的布局逻辑优化都是纯移动端的。
话不多少，先上图！
技术栈
布局
整个app都是利用了rem来进行一个布局的，在不同的移动设备上都拥有还算不错的显示效果。
所有图形都是字体图标，非常的小并且可以无损放大，非常好用
Vue-router
vue-router我感觉非常适合这种切换的情况，比单组件切换的体验会更好一些，毕竟单纯组件做返回会非常麻烦，毕竟这是一个单页应用。单击返回的感觉真的很好。
在使用vue-router的时候有一个问题，就是keep-alive的组件他的数据是会缓存的，这样当你切换组件的时候，数据就无法重新获取，我的解决办法是利用router的钩子
beforeRouteEnter(to,from,next){
next(vm=>{
vm.todoListData = vm.$store.state.nowTodoListData
})
},
每当路由进去之间就尝试获取新数据
vuex
在我使用vue-router的时候出现一个棘手的问题，就是组件之间的通讯问题。在我这个应用之中，有着非常高频率的内部通讯。如果使用事件和props通讯，会出现非常大量的通讯路线，整个程序的复杂度会大大提高。
但vue的作者早就想到了这个问题。所以我使用vuex来管理整个数据模型。我仅仅使用了60行的vuex配置就完成了所有的数据管理，并且这些操作都是在一个文件之中，非常方便查看与分析！
本地存储
既然这是一个todoApp,那么本地存储就很有必要了，毕竟一旦刷新丢失数据是种非常难受的体验，所以我使用了h5的localstorageAPI进行本地存储，在vuex中添加了两组mutations
localSave(state) {
let storage = window.localStorage
let data = {
notes: state.noteListData,
todos:state.todoListData
}
storage.setItem("data",JSON.stringify(data))
},
localLoad(state) {
let storage = window.localStorage
let data = JSON.parse(storage.getItem("data"))
if (data) {
state.noteListData = data.notes;
state.todoListData = data.todos;
}
}
开发总结
我觉得在vue框架之下开发一个webapp是一件非常自然而又愉快的事情，感觉真的很棒。可以让我专注于数据的更新，专注业务本身的逻辑。并且性能非常之高，感谢虚拟DOM。感谢VUE。
另：默认配置下vue-cli build的路径是/ 所以可能会出现资源找不到的错误。
解决办法：修改项目config文件夹里index.js中的assetsPublicPath，默认是/，改成你想设置的子目录名称 比如在改成./就能在当前目录下去查找资源文件。
地址
Demo地址：https://github.com/zhangzhengyi12/vue-todolist-app/tree/master
预览地址：https://yinode.tech/vue-todolist-app/#/