章鱼记账项目

project from jirengu.com fangyinghang Frontend class 技术栈： Vue2 + TypeScript + Vue Router + Vuex 实现路径

Labels 组件 写 结构 写 样式 写 行为 新增的标签存在什么位置？参考之前写的Money.vue中写的标签初始值是固定的，如果把新增标签的数据放在tags初始值上，那么刷新时，就会再次出现初始

project from jirengu.com 收集四个组件的value 需求是把用户填的东西，包括新增标签、备注、支出或收入下的金额输入信息，收集起来，单击ok键的时候，变成一个大的对象。 1.

project from jirengu.com MVC重构 用MVC设计模式，把项目代码在数据层面进行重构，所有数据Model层面的集中到一个文件，所有视图View放在一起。 初始化数据： 更新数据

project from jirengu.com 实现Labels.vue的功能： 先初步写一版页面： 进一步优化HTML，并实现SCSS样式： 实现新建标签的功能： 新增的标签存在什么位置？参考之前

project from jirengu.com 写ID生成器(在lib目录下新建createId.ts)： 重新封装recordListModel.ts，重新封装create方法，同时封装clone

用Vue Router实现底部导航 1. 确定页面URL 1.1 编写router 1.2 将router写到全局变量里 1.3 在App.vue中用展示router 1.4 在Nav.vue中写对应

写统计页面、样式 页面效果图： 支出收入在Money页面做过这个tag 假如直接改的话，因为有scoped精准样式的干预，不能修改，以免影响其他样式 用deep语法(>>>)改样式，写法为/deep/

Money.vue组件 1. 先搭一个初步的框架，控制文件代码行数150行以下，多于150行就想办法拆分： 2. 写SCSS样式的总体思路是： 2.1 先reset，把默认不需要的样式处理掉，都移到a

project from jirengu.com NumberPad.vue组件 完成下面区域的内容： 页面就只有2层结构，1层是输出框output，另一层是14个按钮button，代码为： 首先，确

技术栈：Vue2+TypeScript+Vue Router+Vuex 1. 底部导航 1.1 用哈希模式确定每个页面的路径 默认进入#/money，其余路径#/money记账,#/labels标签,

project from jirengu.com Vuex--全局状态管理 state 存放数据的地方 mutation 用于写数据的地方，同步数据 action 用于调用method，异步操作，发A