vue/react/angular开发的css架构思考
前端  /  管理员 发布于 5年前   171
前端开发现在已经从传统的后端web多页面开发模式转向前端单页SPA开发模式,而vuejs/react/angular则是开发SPA非常优秀的前端框架。组件化开发由react最早提出,vuejs后发优势,将组件化开发贯彻到了极致。虽然spa开发由于组件式开发带来的组件重用,可维护,可扩展非常好,但是css样式的管理一直是一个令前端团队头疼的问题,特别是当页面越来越复杂,并且有多个SPA页面时如何能够让样式重用,并且可维护,可扩展并没有一个特别有效和被验证过的普适方案。本文试图总结一些css模块化在vuejs开发中的探索。
1. 由于一般会有一个app组件作为整个vue应用的container,因此一些全局性的css样式,最好在这个app组件中定义;
2. 完全组件化开发,将每一个vue组件都作为独立可重用单元对待,css也不例外。组件相关的css就在vue的style定义块中进行定义和开发,并且每个组件的root元素都给一个class定义,css的定义都应用在这个class里面,这样可以实现样式的隔离;
3. 在less/sass文件中单独定义包含color,margin,fontsize等外观属性的公共定义文件,比如globalcde.less文件,这个文件可以通过sass-resources-loader来实现在所有vue组件中可见,并且加以引用。这样做的好处是所有用户感知的全局皮肤都在一个中央控制的文件中定义,一旦需要修改设计,只要在这个文件中修改对应变量。但是需要注意的是,在vue组件设计时,不能随意hard coded了,而是需要引用这里定义的color, margin,fontsize等定义!
4. 一般来说,我们可能会引用类似element-ui,ant-design等组件库,这时如何既能享受到这些成熟组件带来的快速开发便利,又能定制这些组件从而适应我们自己的品牌色系呢?一个可行的思路是通过调用这些组件库的api,使用上面第3步中定义的全局色系来定制第三方组件库的theme
123 在
Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..原梓番博客 在
在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..博主 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..1111 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..路人 在
php中使用hyperf框架调用讯飞星火大模型实现国内版chatgpt功能示例中评论 教程很详细,如果加个前端chatgpt对话页面就完美了..Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号