旺財記帳項目-Money.vueコンポーネント実現(上)

1.小技:各行を高速で包む

選択して、shiftを2回押して、surroundを入力して、surround with emitを選択して、li*を入力して、n個のliが行数

を包むという意味です.
2.input、labelの書き方

新米

ベテラン

3.ファイル行数規則

1つのファイルは150行を超えています.普通は複数のファイルに分解されます.

4.CSSを書き始める

1.cssはリセットして、別のファイルress.scssに引き出して、ap.vueに

を導入する.

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

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

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

.フォントの処理には、fonts.cssが必要です.

googleで「fonts.css」中国語

を検索します.

font-familyの場所を見つけ、helper.scssでfontを宣言し、ap.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;
}

.変数をhelper.cssに入れます.

command+shift+fでグローバル検索を行います.

helper.cssこのファイルは変数、関数とmixinしか入れられません.最終的に消えるものです.

4.cssオススメの順番を書く

普通はどちらでもいいです.複雑なら、中から外に行くことを勧めます.中が一番簡単ですから.
5.scssの使い方

セレクタの中の

.tags {
  > .current {

  }
}

セレクタ自体

.tags {
  &.current {

  }
}

6.ボタンのフォントスタイルは引き継がれません.

は、reett.scssに

を加入する.

button, input{
  font: inherit;
}

7.フォントの中央揃えの解決

第一の方式で、lineahtは高さと同じで、この場合は1行だけで

として使われます.

第二の方式は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の%を使って、placceholder機能

// 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スタイルを制御する
//こう書くとバグがありますので、deepを書きます.

// Money.vue




// Layout.vue



  export default {
    props: ['classPrefix'],
    name: "Layout"
  }

15.モジュール化の方法

は一つのファイルを150行調べてモジュール化を実行します.

.html scssを切り出した単独.vueファイルを導入する時に書きます.

最後に関連ファイルを一つのフォルダ

に置く.