vue单页应用中的样式管理

vue单页应用中的样式管理

vue常被用来做一些单页应用，这时就会遇到样式全局化的问题。稍微一不注意，样式就会在整个项目中生效。尤其在修改别人的项目，需要特别注意。所以在定义样式时，要注意样式的局部性，可以通过下面三个方式来实现

1.特定的class名称(推荐)

class 名称可以与当前页面文件名称进行关联，相当于手动进行了局部的设置。
如在主页中，可以这样设置样式：
.index_div_container{}

在登录页面中，可以这样设置样式：
.login_username{}

当然，也可以使用其他的方式

2.添加scoped

vue scoped 样式穿透方式
添加scoped可以使样式只在当前页面组件中生效，但是有时可能造成页面样式不生效的情况，这时，可以使用 /deep/ 或者 >>> 进行页面样式穿透。

.wrapper >>> .swiper-pagination-bullet-active{
    background: #fff
}
.wrapper /deep/ .swiper-pagination-bullet-active{
    background: #fff;
}

scoped的原理，是为声明了样式的组件添加一个唯一的id，做到样式的局部化，但是只会为最外层的dom添加，不会为内部的dom添加，所以可能会出现不生效的问题。

3.使用 行内样式 style 属性进行样式设置

这种方式当然是最有效，但是也是最麻烦的方式了。

更多内容请关注我的个人博客 爱秀逗 www.5ixiudou.com