vue 填坑系列总结——scoped

在上个月份的一次使用vue的项目开发的过程中发现了一个很诡异的现象，就是我在<style lang="stylus" scoped> </style>中写样式时发现样式突然间不起作用了，这是为什么？

填坑步骤

1.当时我首先想到的是缓存问题，所以果断的按住ctrl + shift + del键，清除缓存，但是我发现‘然并卵’；

2.这时我恍然大悟，我使用的是vue-cli开发者模式，当我修改样式的话，vue运行环境会及时的帮我重新编译的，我顿时明白过来，真正的原因并不是这个样子；

3.由于我当时刚接触stylus不久，听一些大牛说这个css预处理器有多么的优秀，因此就在所做的的项目里进行尝试，对于非mvvvm项目我使用了webpack搭建了一个环境对css使用stylus完全没有问题，而对于mvvm项目是初次尝试，所以想当然的我就认为是stylus的编译问题，认为用webpack使用stylus处理css在mvvm项目中存在bug，于是乎想到的就是Google查找解决方案，很遗憾没有我想要的结论，这时我想了一个解决方案就是使用sass或者less来处理，由于从我毕业后首先接触到的是sass，所以，我就将使用stylus风格写的代码改为了sass风格的代码，而且也很快的完成了，然后就是输入npm run dev 命令，结果发现还是原来的效果，当时我的第一感觉就是崩溃?；

4.没得办法了，不行，作为一名‘一不怕苦，二不怕累，三……’，岂能被这点小困难难倒，办法还是有的，打开chrome浏览器的调试工具，如下图（pic - 1） 我们单击‘+’可以添加新的样式规则body{}在这里写入我们所需要的样式，结果令人很满意，我到了我想要的结果，但为什么使用webpack编译后的结果没有达到我们所想要的结果呢？

5.接下来，我们所要做的就是排查故障的位置了，在这里我们要感谢现在的浏览器开发商给我们提供的强大工具开发者工具了，废话不多说进入正题，寻找故障原因；

首先, 按住 Ctrl + shit + c 键，单击鼠标左键选中目的元素，则开发工具面板中就会出现目的元素的样式，然后单击样式后面的样式源地址，面板中就会出现正常的样式的根目录。查看相应的的情况。
其次，上面的是我们在做兼容性处理，或者样式查找，微调时，使用的方法，但在mvvm组件化开发的项目中，你能找到未覆盖的样式，但很难找到目的元素样式的，我们该怎么办，很简单我们只要找该组件中起效的样式即可。
下面列几张图说明一下上面的情况：

项目问题1： 图标和字体间的艰巨过大（这个是我在项目中需要解决的问题）

测试问题2：只能找到你要覆盖的样式的位置，而不能找到你写的覆盖样式的位置
我们要找的是这样的样式的位置

按照惯性思维找到的确是这样的

最后，我们会发现在样式中会有这样的一句代码

.dynamic .mu-item.show-left[data-v-5b8a484c] {
padding-left: 56px;
}

如果我们把show-left后的[data-v-5b8a484c]去掉，就会发现效果如我们所需要的那样,但是我们会发现如果这样的话我们就会影响其他页面的样式，我们的样式就变成了对整个项目都其作用的样式，所以，我们现在应该明白了，出问题的地方时哪里了吧。

结论与总结

问题就在于我们使用的scoped属性，它的存在可以让我们的组件的样式保持独立性，但同时使用scoped也存在一个问题，就是我们不应该在项目中定义重复的样式规则名称。讲到这里scoped的填坑应该结束了，但是我想有部分童鞋可能会有这样的想法我在做项目时不时用相同的规则名进行样式覆盖不就可以了，可是我想说的是我们在项目开发的过程中这样的问题我们并不能，完全避免，特别是我们使用前端框架进行开发时这种问题就不可避免，说到这里，我就为大家推荐两款我是用着比较方便的vue框架，第一个是element UI,muse-ui,再补充一句有逼格的话‘武器虽好，但技术更重要’。

vue框架使用体会

1.要慎用框架，结合自己项目的情况选择合适的框架;
2.使用框架要充分了解框架，了解框架有哪些模块组成，了解框架的优缺点，使用框架的优点，回避框架的缺点，针对框架的不足我们最好要有自己的一套健壮的解决方案，否则慎用；
3.针对第二点，我们在开发的过程中由于考虑不足，或者项目业务的变化，而产生了心得问题，让框架暴露出了新的问题，我们要有较强的纠错能力，这时就是考验我们基本功的时候了，所以，我们要充分的了解vue，知晓vue的工作原理，理解vue每个组成部分的意义和作用；
4.由于使用vue-cli开发是一个需要了解webpack，node.js, vue ,以及所使用的vue框架的情况，所以js这一关我们必须过，然后就是，了解webpack，node.js,当然node.js是一个很好的容器，里面包含了各种有趣的插件，有兴趣的童鞋不妨尝试一下~

最后，送大家一句话‘路漫漫其修远兮，吾将上下而求索’，努力吧，少年！