Wangcai bookkeeping project - Implementation of Money.vue component

1. Tips: wrap each line quickly

  • Select, press shift twice, enter surround, select surround with exit, and enter li *, which means the number of lines covered by n li

2. input,label

  • Novice
<label for="xxx"></label>
<input id = 'xxx' type="text">
  • Veteran
<label>
  <span>Remarks</span>
  <input type="text">
</label>

3. Rule of file lines

  • A file with more than 150 lines is usually split into multiple files.

4. Start writing CSS

  • 1. Reset CSS, extract another file reset.scss, and then import it into 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. Font.css is required for font processing
    • google "fonts.css" in Chinese
    • Locate the font family, declare font in helper.scss, and use it in 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. Put all variables into helper.css.
    • command+shift+f for global search
    • The file helper.css can only put variables, functions and mixin s, which will eventually disappear

4. Write css recommendation order

  • Generally speaking, it doesn't matter. If it's complicated, it's recommended to go from the inside out, because it's the simplest

5. Usage of SCSS

  • Inside the selector
.tags {
  > .current {

  }
}
  • Selector itself
.tags {
  &.current {

  }
}

6. Button font style will not inherit

  • Add in reset.scss
button, input{
  font: inherit;
}

7. Font centering

  • In the first way, line height is the same as height, which is used for only one line of words
  • The second way is to use flex

8. The underline of a word is longer than the word

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

9. selected underline

  • Avoid using border bottom. When the class disappears, there will be jitter. Use the following methods
&.selected::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: #333;
}

10. For fonts not available, add a type of font after them.

// monospace is a programming font class of equal width
font-family: Consolas, monospace;

11. If float is used

  • Parent element must use clearfix
.clearfix::after{
  content:'';
  display: block;
  clear:both;
}
  • Using% of scss, the placeholder function
// helper.scss
// placeholder
%x{
  &::after{
    content: '';
    clear: both;
    display: block;
  }
}
// How to use
// money.vue
.buttons {
  @extend %x;
}

12. Two layers of Inner Shadow

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

13. Unified replacement of multiple places

  • Press command+r when selected

14. Control css style in component with prefix

//There will be bug s when writing like this. Write 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. How to modularize

  • Insist on modularization when a file is checked for 150 lines
  • Write <name when importing the separate.vue file cut by html scss, and it will be imported in total
  • Finally, put the relevant documents in a folder

This article is based on the platform of blog one article multiple sending OpenWrite Release!

Tags: Front-end Vue Google Programming

Posted on Thu, 06 Feb 2020 08:01:56 -0500 by ckehrer