# 小吴记账Vue版

**Repository Path**: EZVN/money

## Basic Information

- **Project Name**: 小吴记账Vue版
- **Description**: 用Vue+TS写的记账，PC端移动端都可以看
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2023-07-06
- **Last Updated**: 2023-07-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### 404页面

在router中path使用通配符`*`来 匹配404页面

```js
{
    path:"*",
    component:NotFoundPage
}
```

### 统一src资源路径别名

vue  使用@代表src目录 

在CSS中使用`@`会静态语法报错，但是可以使用，

使用`~`不会报错

 `~` 是 stylus-loader 的东西

`~`是相对于其他路径（文件）的，类似于相对路径

```css
@import  "~@/assets/css/index.css"
```

### CSS计算器字体

![image-20210328230638183](C:\Users\YJKJ\AppData\Roaming\Typora\typora-user-images\image-20210328230638183.png)

font-family：特殊字体，通用字体，

```css
.font{
    font-family: Consolas,monospace;
}
```

### SCSS中使用%类名 重新定义clearfix

在scss中声明选择器`%x`

 ```css
//.scss
%x {
  &::after {
    content: '';
    display: block;
    clear: both;
  }
}
 ```
在vue中使用选择器变量`@extend %x`

```css
//.vue
.float{
    @extend %x;
}
```

相当于

```css
//.vue
.float{
     &::after {
    content: '';
    display: block;
    clear: both;
  }
}
```

### flex-end 与 overflow

父容器使用flex布局设置

content滚动条消失，overflow:auto无效，内容过多时不能滑动

```css
.content{
  flex-direction: column;
  justify-content: flex-end;
  overflow:auto
}
```

### TS组件@Prop装饰器

 Prop告诉Vue xxx不不是 data 是 prop
 Number 告诉 Vue xxx  是个Number
 xxx  属性名
 number |  undefined 告诉 TS xx的类型

```js
import {Component,Prop} from 'vue-property-decorator';
 
@Component
export default class Types extends Vue {
  @Prop(Number)  xxx: number | undefined;
}
```

### TS优点

1. 自动提示
2. 推断类型语法检查
3. 编译 报错无法 编程JS 严谨

写Vue组件的三种方式