浅谈vue项目进阶开发-样式篇

1.全局sass的引入

项目开发时,引入全局基本样式，是必要的。如何引入就不再赘述，度娘知道:https://blog.csdn.net/qq_31393401/article/details/80759535;

全局样式包括：reset.scss里包括哪些相信应该都清楚，其次base.scss内可以根据需求加一些基础可适用的样式，如input，button。利用scss预处理样式的优势定义一些样式变量，如与UI设计师定的网站主题风格，主色，辅色、通用字体大小、颜色等、清除浮动、处理文字溢出等。

@mixin定义全局样式函数

移动端屏幕自适应问题：https://www.cnblogs.com/zlbrother/p/7823380.html

2.有关scoped使用中的相关问题

    为了保证在子组件里写的样式由于命名相同不被其他组件样式污染，vue提出使用scoped,保证当前组件内样式难以在被其他组件修改。

使用scoped

但也存在一点问题，很多情况下父组件是需要修改子组件样式的，普通的写法肯定无法修改。vue提供了深度选择器。如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>> 操作符：

使用 >>>

转换成

深度选择器原理

有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 操作符取而代之——这是一个 >>> 的别名，同样可以正常工作。

该问题解决了，但还有个问题。scoped真的不容易被修改吗？看下面代码

在其他组件也写了class b改变了字体大小，很明显会被改变，一样样式被污染了。

如何彻底解决该问题呢？下面会说。

使用scoped需要注意的两个问题：

a. CSS 作用域不能代替 class。考虑到浏览器渲染各种 CSS 选择器的方式，当 p { color: red } 设置了作用域时 (即与特性选择器组合使用时) 会慢很多倍。如果你使用 class 或者 id 取而代之，比如.example { color: red }，性能影响就会消除。

b. 在递归组件中小心使用后代选择器! 对选择器 .a .b 中的 CSS 规则来说，如果匹配 .a 的元素包含一个递归子组件，则所有的子组件中的 .b 都将被这个规则匹配。

3.css Module的使用

在style标签中添加module属性，表示打开CSS-loader的模块模式

　在模板中使用动态类绑定:class，并在类名前面加上'$style.'

　也可以使用数组或对象语法

4.UI库的引入

目前比较好的UI库有element-ui,可以按需取用。有趣的是，该UI库提供的部分组件，可以直接用组件名当class名去修改组件的样式。如：;可以直接使用.el-row去修改样式。