Wangcai bookkeeping project - Implementation of Money.vue component

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

• Novice

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

• Veteran

<label> <span>Remarks</span> <input type="text"> </label>

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

• 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

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

• Inside the selector

.tags { > .current { } }

• Selector itself

.tags { &.current { } }

• Add in reset.scss

button, input{ font: inherit; }

• 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

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

• 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; }

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

• 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; }

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

• Press command+r when selected

// 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="classPrefix && `$-wrapper`"> <div :class="classPrefix && `$-content`"> <slot /> </div> <Nav/> </div> </template> <script lang="ts"> export default { props: ['classPrefix'], name: "Layout" } </script>

• 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!

6 February 2020, 08:01 | Views: 4019