1.scoped
scoped的设计思想就是让当前组件的样式不会修改到其它地方的样式,使用了data-v-hash的方式来使css有了它对应模块的标识,这样写css的时候不需要加太多额外的选择器,方便很多。
(
- 给HTML的DOM节点加一个不重复
data
属性(形如:data-v-19fca230
)来表示他的唯一性 - 在每句css选择器的末尾(编译后的生成的css语句)加一个当前组件的
data
属性选择器(如[data-v-2311c06a]
)来私有化样式
问题 :在当前父组件下调用其他组件的时候,无法覆盖到其他组件的样式
)
如果在子组件里设置了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)
}
}