Vue + TS 极简记账应用：富贵记账

前言

富贵记账是一款极简的记账应用，也是一款基于 Vue、VueRouter、Vuex、TypeScript、ECharts 的单页面应用，UI 模仿业内知名的鲨鱼记账，实现原创。

在项目开发过程中，我遇到了很多 webpack 和 TypeScript 方面的问题，现将解决过程记录下来，供大家参考。

使用技术栈

• Vue 2.x
• VueRouter 4.x
• Vuex 4.x
• TypeScript 4.x
• Webpack 5.x
• ECharts 5.x

项目结构

├── build/
│   ├── assets/
│   ├── css/
│   ├── fonts/
│   ├── js/
│   └── vendor.js
├── node_modules/
├── public/
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
├── src/
│   ├── App.vue
│   ├── components/
│   ├── pages/
│   ├── router/
│   ├── store/
│   ├── styles/
│   └── utils/
├── tsconfig.json
├── vue.config.js
├── package-lock.json
└── package.json

主要功能

• 记账：支持收入和支出记账，可以自定义账本和类别。
• 报表：支持按天、周、月、年查看账单，并提供饼状图和折线图等多种图表展示形式。
• 预算：支持设置预算，并提供预算超支提醒。
• 数据导出：支持将账单数据导出为 CSV 或 Excel 格式。

开发过程中遇到的问题

Webpack

• 问题： 使用 webpack 打包时，遇到 Module not found: can't resolve 'fs' 错误。
• 解决方法： 在 webpack.config.js 中添加 node: { fs: 'empty' } 配置。

TypeScript

• 问题： 使用 TypeScript 时，遇到 Property 'xxx' does not exist on type 'xxx' 错误。
• 解决方法： 在 tsconfig.json 中添加 strictPropertyInitialization: false 配置。

结语

富贵记账是一款极简的记账应用，也是一款基于 Vue、VueRouter、Vuex、TypeScript、ECharts 的单页面应用。项目中遇到的 webpack 和 TypeScript 方面的问题及解决过程也一一记录下来，供大家参考。

我希望这款应用能够帮助大家更好地管理个人财务，实现财务自由。