vue引入公共css文件

html-css023

vue引入公共css文件,第1张

如图是一个常见的vue文件结构

在app.html 或者*.vue中引入css,如下所示:

在 app.html引入css对阵个页面都生效,在vue文件中引入,只对改vue生成的页面有效

这个要看具体情况的,需要看场景来抽公共的。

比如:常见的抽公共是以模块为单位的集合,比如按钮、布局类的(如栅格布局flex)等,能经常用到的模块。

那如果所有属性都抽公共的话,会导致html页面里class的值太多,比如color属性抽一个,font抽一个,padding抽一个等。会使得class值太长,从而导致html页面的大小变大,同样会不利于页面的加载。

所以最好适中,把常用的抽公共,比较独立的就单独写样式。

常用的

取消body和ul的margin和padding,设置list-stylle:none,设置整个页面的font-size和font-family,设置a标签的样式,这些是针对标签的。

还有你可以自定义的类例如,清除浮动,左浮动,右浮动什么的都可以写在公共部分