# 微信记账本

**Repository Path**: yanglsbb/MoneyBook

## Basic Information

- **Project Name**: 微信记账本
- **Description**: 用Vue3实现微信记账本
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2025-09-12
- **Last Updated**: 2025-09-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 移动端的项目
1. 挑一个合适的 ui 框架 （ Vant ）
2. 不同的屏幕尺寸适配   （ rem + js）
3. 数据可视化的库    （ Echarts ）


# 登录功能
1. 登录权限   
2. 前端发的登录请求，后端返回有一个 token ，前端将 token 存储在本地，下次请求时，将 token 放在请求头中，后端验证 token ，如果 token 正确，返回数据，否则返回错误信息401。


# 子父通信
- 子组件defineExpose()将数据暴露出去，父组件通过ref获取子组件实例，然后通过子组件实例获取数据。（state.xxx 被暴露时会取默认值，需要用 toRef 将它处理成双向响应）

- 子组件通过 defineEmit() 定义一个事件，并发布该事件，父组件通过 v-on 订阅该事件，然后执行回调函数。


# axios
1. 


# 路由守卫
 - 全局守卫  beforeEach， beforeResolve， afterEach   每当路由发生变化时，都会触发
 - 组件内守卫

 - beforeEach((to, from , next) => {}) 每次路由跳转前都会拦截下来，通过判断 to.path 的值来决定要去的页面是不是需要 navbar, 最后 next() 放行


# 组件
1. 复用性
2. 独立的功能

 - 一般来说组件中不写业务逻辑，只写模板和样式

 # 移动端适配 
rem + js
- rem ：相对单位 相对于html里面的font-size 1 rem 就是1倍根字体大小 2rem 就是2倍根字体大小
在html{}里面设置根字体大小 font-size:20px; 
那么 width：15rem 就等同于15*20=300px 
要实现手机屏幕大，显示内容就大，直接改根字体大小就好。

如何实现移动端适配（手机屏幕大，显示内容就大，直接改根字体大小就好）呢？
css里的媒体查询，
width>=400px 时下面代码生效
@media screen and (min-width:400px){
  html{
    font-size:22px  // 一旦生效，覆盖前面的font-size
  }
}

但是市面上的手机有很多尺寸，要一个一个的配，要写很多媒体查询，太麻烦了，怎么办
直接用JS获取屏幕尺寸并控制根字体大小。
- js
node仓库安装 lib-flexible 
在main.js中引入lib-flexible的源代码  import 'lib-flexible/flexible.js'
这样就会自动帮我们做移动端适配了

# 如何配置@，让@代替src