vue 填坑系列总结——scoped

在上个月份的一次使用vue的项目开发的过程当中发现了一个很诡异的现象，就是我在中写样式时发现样式忽然间不起做用了，这是为何？

填坑步骤

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编译后的结果没有达到咱们所想要的结果呢？

pic-1

5.接下来，咱们所要作的就是排查故障的位置了，在这里咱们要感谢如今的浏览器开发商给咱们提供的强大工具开发者工具了，废话很少说进入正题，寻找故障缘由；

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

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

pic-2

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

pic-3

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

pic-4

最后，咱们会发如今样式中会有这样的一句代码
.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是一个很好的容器，里面包含了各类有趣的插件，有兴趣的童鞋不妨尝试一下~

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