vue/react/angular开发的css架构思考

时间: 2019-06-02阅读: 257标签: 架构

前端开发现在已经从传统的后端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


吐血推荐

1.站长广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入...

2.休闲娱乐: 直播/交友    优惠券领取   网页游戏   H5游戏

链接: http://www.fly63.com/article/detial/3511

软件架构师之路

软件架构师是一名软件开发专家,他可以进行高层设计选择并决定技术标准,包括软件编码标准,工具和平台。软件架构可以被抽象的分为几个层次,不同的层次对技能的要求不同。对层次有很多不同的划分

前端领域不需要架构师?

在传统桌面软件开发中,架构师是一种通过设计架构保证团队能够良好分工和有序工作的岗位。在工程领域,我们凡是要做点什么事儿,都会有明确的目的性,这个目的性,一定是为了完成生产服务业务的。

实用的软件架构方法

软件架构就是软件的基本结构,它是有关软件整体结构与组件的抽象描述,用于指导大型软件系统各个方面的设计。软件架构是一个系统的草图。软件架构描述的对象是直接构成系统的抽象组件。

微前端架构:如何由内而外取代单体架构

如何利用微前端技术实现单体应用程序的现代化改造?在本篇教程中,我们将探讨如何将前端从单体架构当中剥离出来,并快速完成微前端架构迁移。本文作者将结合个人项目实践经验为大家介绍心得。

微服务架构陷阱:过渡设计和设计不足

在这篇文章里,我将简要地介绍在设计微服务架构时需要注意的问题。如果实施得当,就会获得自治能力和灵活性,但同时也会带来通信延迟和部署及托管成本。这篇文章并不是一个高级指南

网站架构优化性能

最初业务量不大,访问量小,此时的架构,应用程序、数据库、文件都部署在一台服务器上,有些甚至仅仅是租用主机空间, 将应用程序、数据库、文件各自部署在独立的服务器上

成为一个优秀架构师,你必须了解的 30 条设计原则

众所周知,架构师的角色,更偏向于策划、而非指挥,塑造、而非支配,其存在的意义,在于引导大家讨论、而非自己主宰一切。但是,具体应该如何执行呢?本文作者整理了 30 个公认的架构原则

创建软件架构时应该关注什么?

软件架构师的首要关注点不是系统的功能,而是软件的品质,软件品质关注点指明了功能呢必须以何种方式交付,才能被系统的利益相关人所接受。作为一个架构师,你应该了解软件产品利益人以及他们的关注点:

基于 NodeJS 的 serverless 架构实践

通过将 BFF 构建于 serverless 之上,将人工智能实验室(天猫精灵)数十个中后台应用整合到了一个统一入口。用云函数的方式取代了传统基于 NodeJS 的 BFF 层,提供了在一个站点下不同应用以及不同环境的快速切换能力

软件架构被高估,清晰简单的设计被低估

软件架构最佳实践、企业架构模式以及系统描述的正式方法都是非常重要且实用的工具,总会有合适的场景让它们发挥作用。但在设计系统时,请从简单始、以简单终,尽可能避免一切会无谓提高复杂度的架构与正式工具

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全