项目介绍

由本人独立实现的一个简易的记账应用，期间遇到很多webpack和TypeScript的问题，将在博客记录。源代码几乎完全用TypeScript实现，用到了装饰器语法。

实现效果：SmartMoney巧记-超简洁的记账助手

源码链接：github.com/NiceyLai/Sm…

项目描述：

• 该项目是一款基于 Vue 2 / TypeScript / Webpack 构建的记账应用，使用了 Vuex / VueRouter 等工具库，构建形式为 SFC 单页面应用。
• 可适配手机、平板、电脑，主要针对手机页面进行优化。
• 项目的各页面切换同样采用前端路由，用户数据采用 Vuex 管理

主要功能：

1、记账：金额、标签、备注、收入或支出等。

2、管理标签：添加、改名、删除

3、查看历史

项目经验：

• 分析设计需求，将项目中各个页面进行组件化拆分，减少重复。
• 各页面和组件的数据流向复杂，统一使用 Vuex 工具管理用户数据状态，并使用 localStorage本地存储。
• 采用 TypeScript 语言在 Vue 2 中进行开发的体验并不是很好，Vue 2 对 TypeScript 的支持不够完美，需要大量使用装饰器语法来配合构建 Vue 组件

虽然本项目只包含三个界面，但几乎涵盖了 Vue 2 所有重要知识：

1. 类组件+装饰器（TypeScript）
2. 创建标签部分用 mixin 减少重复代码
3. computed 获取 Vuex 的数据，并且在 TS 中需要用到 getter 语法）
4. watch 装饰器、prop、sync、v-model 等
5. Layout 组件用到了 slot 插槽
6. SVG symbols、ESlint
7. 用 LocalStorage 存储本地数据
8. 表驱动编程： :class="{key : value, key : value}", 若key为true，则class=value
9. 模块化思想
10. 重构
11. 命名严谨性
12. Vue Router
13. Vuex