基于Vue的新拟态ToDoList（待办事项添加）

简介

基于Vue半全家桶的新拟态板ToDoList（点击访问在线地址），一个todolist而已，用几乎Vue全家桶是不是有点小题大做，是的，必须的，因为要巩固的知识，并且功能也相应的增加了，你可以打卡想看的书或者电影，以及小小的改变了todolist的相应逻辑，当天未完成的ToDo会累计到待完成任务，看着一天天积下来的待办，多多少少会减少你的惰性吧（希望目的达到），从而激发你一天满满的动力哈哈哈

注意：所使用的是localStorage存储数据（没用服务器），所以，如果你一不小心用了什么清垃圾软件或者手动清掉浏览器数据的话，它会消失，它会消失，它会消失

采用纯less写样式，只写了PC端响应式布局，没做移动端适配（就不要尝试用手机打开了，大丑）

设计图

当然就是在PS中画大概的设计图啦，设计稿尺寸是1920*1080，如下图

啊这啊这，这和成果图差距怎么这么大，好吧，确实一开始是按这样搭建的，骨架基本就是这样的，后面因为突发奇想，之前在手机的主题市场看过新拟态设计，然后被深深吸引了，在完成页面的过程就想起这个，然后就干脆按这个骨架直接重构页面了，也就是上面的成果图，废话不多说，直接进入主题

功能

1. 输入代办，按下回车键，添加到当天待办事项
2. 点击完成按钮，完成该代办，添加至完成事项
3. 点击删除按钮，删除该待办
4. 动态显示已完成和未完成事项数量
5. 当天未完成待办，第二天添加至待完成任务，可在第二天点击“今天完成”重新添加至我的一天中
6. 阅读选项打卡想看的书
7. 电影选项卡打卡想看的电影
8. 点击头像就是回到我的博客啦
9. 导航栏右侧文字根据时间改变相应问候

所用技术

• Vue
• Vue CLI
• Vue Router
• Less
• webpack

划分目录

src下的目录结构

• network （网络模块）→相关网络请求（axios）
• components （组件）
  • common （公共模块）→可以多项目复用
  • content （业务模块）→该项目可以复用
• views （路由页面模块）
• common （公共js文件–常量…）
• assets （静态资源）
• router （路由）→页面跳转
• store （vuex状态管理）

组件划分

主要划分为三个大组件

NavBar

• 分为左中右三个插槽
• 中间添加待办事项
• 左插槽展示当前路由信息
• 右插槽按时间显示问候信息

SideBar

• 用来控制路由的主要组件
• 分为两个部分，一个头像模块，一个路由切换模块
• 路由切换模块放置切换路由的小item

TaskBar

• 放置待办的组件
• 根据待办状态显示不同状态的item

路由划分

1. myday：当然就是我的一天啦，添加你今天要做的事情
2. movie：电影，存放你想看的电影以及打卡的电影
3. read：阅读，存放你想看的图书以及打卡的书
4. todo：你一天没做完的事情都会丢到这里，第二天你可以重新拾取到新的一天里面

核心代码

最重要的当然就是侦听数据的改变啦，毕竟你时时刻刻都在改变数据，vue官网watch函数介绍