旺財記賬項目-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文件，引入的時候寫
• 最後把相關文件放到一個文件夾