vue项目中的坑

1.scoped

scoped的设计思想就是让当前组件的样式不会修改到其它地方的样式，使用了data-v-hash的方式来使css有了它对应模块的标识，这样写css的时候不需要加太多额外的选择器，方便很多。

(

问题：在当前父组件下调用其他组件的时候，无法覆盖到其他组件的样式

)

如果在子组件里设置了scope，那么在父组件里不能直接修改子组件的样式。解决方法：在父组件中使用vue的深度作用选择器.

.parent >>> .child(...)
.parent/deep/.child{...}

如果不使用scoped，如何解决样式全局污染？

　　推荐使用scoped推动组件私有化，文章所提到的不使用仅出现在已有UI库的样式覆盖上（当然人家用了scoped 那就很难办了）。

　　首先，解决组件样式全局污染，也就是我们在这里不使用scoped 覆盖了样式，那么我们在其他地方调用该组件就会被覆盖。那么我们在使用组件的时候对组件给一个类名或者其他甄别属性（id），覆盖样式就针对该类名进行重写样式。

　　其次，解决其他样式全局污染，如果我们通过：

<style lang="less">
    @import "./test.less";
</style>

　　引进样式，那么不使用scoped ，"./test.less" 中的其他类名样式可能会污染全局，我这里用一个比较笨的方法处理：在模板中使用两次<style></style> 标签：

<style lang="less" scoped>
    @import "./test.less";
</style>
<style lang="less">
    //你的覆盖样式
</style>

　　这样既覆盖了样式，其他样式不会被覆盖到全局

2 promise请求超时的问题，使用promise.race()方法；

race()方法：只要有一个promise请求成功，则请求成功。

3.组件的异步加载

当页面很多，组件很多的时候，页面在首次加载的时候特别的慢，所以对页面进行了一下优化。

解决方案：在路由index.js文件中加上了require，将需要的首页组件require进来就可以了。

{
      path: '/home',
      name: 'Home',
      component: function(resolve){
         require(['@/views/home'], resolve)
      }
}