关于Vue.js的一个问题

chen_2016_web 2018-03-17 02:52:49
我想问问各位大神:
例如,有一个很简单页面,页面有两部分组成。这个页面的名称是Home.vue,即主页。

<H></H>
<M></M>

JS,我就不写了。已经成功的引入组件H和组件M。组件H是头部组件。

下面是组件H,即H.vue,里面有:

<header id="h">
<B></B>
</header>

而组件H,里面引入了轮播图组件B。

我使用了路由,点击轮播图组件,路由会跳转到L组件,L里面有很多板块,我把它分成多个小组件,例如XYZ。那么问题就来了,大家都知道,可以使用scope让某个组件,独用某个css文件。这本来是好事,但也有问题。例如,我这里引入了css文件,index.css。

<div id="l">
<X></X>
<Y></Y>
<Z></Z>
</div>
<style src="../index.css" scoped></style>

问题就是,index.css只作用于L组件,而不作用于XYZ组件?这其中的原因,我不知道。如果想css文件生效,必须XYZ都引入一个css文件。但,这是一个页面,将会有很多共用css。如果每个组件都引入同类的css,岂不是浪费资源吗?
以前,我会把共用的css放在index.html文件里面,让页面一次渲染。但如果,这是一个很大的项目,这一次性加载进来的css,将是何等的巨大!JS,有一样的问题。我看了很多移动端站点,他们是实现了真正的按需加载,且没有过多的浪费。例如苏宁等等。解决方法,肯定有的。但我不会。求大神给一个合理回答,万分感谢!
备注:我用的是vue-cli来开发的,使用的是webpack-simple。
...全文
539 3 打赏 收藏 转发到动态 举报
写回复
用AI写文章
3 条回复
切换为时间正序
请发表友善的回复…
发表回复
火凤水凰 2018-03-23
  • 打赏
  • 举报
回复
貌似css 按需加载,的先按组件也是按需加载才行的。
chen_2016_web 2018-03-23
  • 打赏
  • 举报
回复
这个问题,有人能解决吗?如果没人,来个人,随便回复一句,我结帖了。
亡灵走秀 2018-03-23
  • 打赏
  • 举报
回复
我想,大概是你用了 scoped 这个“指令”吧, 使用scoped编译会将当前引入的css文件样式类全部hash化掉了。 这个东西将当前主.vue文件引入的css限制只作用当前vue文件。下面的就不会有用了。

87,941

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧