旺财记账项目-Money.vue组件实现(上)

1. 小技巧:快速包裹每一行

• 选中，按两下 shift，输入 surround ,选择 surround with emit,输入 li*,意思就是 n 个 li 包住行数

2. input,label 的写法

• 新手

<label for="xxx"></label>
<input id = 'xxx' type="text">

• 老手

<label>
  <span>备注</span>
  <input type="text">
</label>

3. 文件行数规则

• 一个文件超过 150 行，一般拆成多个文件。

4. 开始写 CSS

• 1. css 重置,抽成另外一个文件 reset.scss，然后在 app.vue 中引入

// reset.scss
* {
  margin: 0; padding: 0;
  box-sizing: border-box;
}

a{
  text-decoration: none;
  color:inherit;
}

// app.vue
@import "~@/assets/style/reset.scss";

• 2. 处理字体,需要用到 fonts.css

  • 在 google 搜索 "fonts.css" 中文
  • 找到 font-family 的地方，在 helper.scss 中声明 font,然后在 app.vue 中使用

// helper.scss
$font-hei:  -apple-system, "Noto Sans", "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Source Han Sans SC", "Source Han Sans CN", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;
// app.vue
body{
  line-height: 1.5;
  font-family: $font-hei;
}

• 3. 把变量都放到 helper.css 里面。

  • command+shift+f 进行全局搜索
  • helper.css 这个文件只能放变量，函数和 mixin,最终会消失的东西

4. 写css推荐顺序

• 一般而言无所谓，如果比较复杂，推荐从里到外，因为里面最简单

5. scss的用法

• 选择器里面

.tags {
  > .current {

  }
}

• 选择器本身

.tags {
  &.current {

  }
}

6. 按钮字体样式不会继承

• 在reset.scss中加入

button, input{
  font: inherit;
}

7. 字体居中解决

• 第一种方式，lineheight和高度一样，这种情况用于只有一行字
• 第二种方式，用flex

8. 字的下划线比字长

border-bottom: 1px solid;
padding: 0 4px;

9. selected下划线的做法

• 避免用border-bottom来做，这种做法当class消失会有抖动，要用以下做法

&.selected::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: #333;
}

10. 处理没有的字体，在其后面加上一类字体。

// monospace就是等宽的编程字体类
font-family: Consolas, monospace;

11. 如果用了float

• 父元素一定要用clearfix

.clearfix::after{
  content:'';
  display: block;
  clear:both;
}

• 用scss的%,placeholder功能

// helper.scss
// placeholder
%x{
  &::after{
    content: '';
    clear: both;
    display: block;
  }
}
// 如何用
// money.vue
.buttons {
  @extend %x;
}

12. 两层内阴影的写法

box-shadow: inset 0 -5px 5px -5px fade_out(black, 0.5),
inset 0 5px 5px -5px fade_out(black, 0.5);

13. 多个地方统一替换

• 选中之后按command+r

14. 用前缀控制组件内css样式

// 这样写会有bug,要写deep

// Money.vue
<Layout class-prefix="layout">
</Layout>
<style lang="scss">
  .layout-content{
    border: 3px solid red;
  }
  .layout-wrapper{
    border: 3px solid blue;
  }
</style>

// Layout.vue
<template>
  <div class="layout-wrapper" :class="classPrefix && `${classPrefix}-wrapper`">
    <div class="content" :class="classPrefix && `${classPrefix}-content`">
      <slot />
    </div>
    <Nav/>
  </div>
</template>

<script lang="ts">
  export default {
    props: ['classPrefix'],
    name: "Layout"
  }
</script>

15. 如何模块化

• 坚持一个文件查过150行就执行模块化
• 把html scss剪切的单独.vue文件，引入的时候写<name 会总动引入
• 最后把相关文件放到一个文件夹