前言 接上文:谈谈我对前端组件化中“组件”的理解,顺带写个Vue与React的demo 上次写完博客后,有朋友反应第一内容有点深,看着迷迷糊糊:第二是感觉没什么使用场景,太过业务化,还不如直接写Vue&react的源码分析,我感觉这里有必要说下我的认识. 首先,要写源码分析很难,第一是他本来就很难,所以一般我们是想了解他实现的思路而不是代码: 第二每个开发者有自己发风格,所以你要彻底读懂一个人的代码不容易,除非你是带着当时作者同样的问题不断的寻找解决方案,不断的重构,才可能理解用户的意图. 我们…

尽管我并非艺术出生,既没有任何设计基础,又没有较高艺术涵养,也深谙在短时间内创造一定艺术造诣并非易事,但是既然当初选择从事网站前端开发,我的目光不能仅停留在前端代码上.作为一名志向在前端领域发展的人员,能够创作出协调和谐的界面,和熟悉前后台交互一样重要. 为控制成本,在网站素材(婚纱摄影图片和网站文字)未准备好时,网站上都是些测试数据,不堪入目.因此我的处女作暂且还没投入使用,实为一大遗憾.在网站投入使用之后,必定附上网址,让大家一睹为快. 一,色彩的联想 每种色彩带给用户不同的心理感受,因此,…

前言 在上一篇的前端组件化方案探究中,我们研究了什么是组件化以及我们为什么需要组件化.也调研和测试了一些开源项目,并且在使用.学习.研究.对比之后最终确定了以 pnpm + workspace + changeset 为技术方向的 monorepo 多包管理方案. 本文主要是沿着该路线进行项目落地,是一篇聚焦于实战的文章. 文章的目标是能够让未接触过monorepo架构的新手也能从0到1的完成一个多包管理的前端组件化项目 细致一点的说,我们主要从这几个方面入手: monorepo项目架构的搭建…

前言 前端已经过了单兵作战的时代了,现在一个稍微复杂一点的项目都需要几个人协同开发,一个战略级别的APP的话分工会更细,比如携程: 携程app = 机票频道 + 酒店频道 + 旅游频道 + ...... 每个频道有独立的团队去维护这些代码,具体到某一个频道的话有会由数十个不等的页面组成,在各个页面开发过程中,会产生很多重复的功能,比如弹出层提示框,像这种纯粹非业务的UI,便成了我们所谓的UI组件,最初的前端组件也就仅仅指的是UI组件. 而由于移动端的兴起,前端页面的逻辑已经变得很重了,一个页面的…

项目背景 项目背景是外包类建站公司里,设计环节沉淀了大量可复用组件,设计师往往只需要微调组件就拼凑出页面,交付给前端,理论上这些组件在前端也可以复用,但实际上前端每次都要重新实现整个页面,浪费很多人力. 功能需求 这个项目的思路是,将所有组件开发出来,统一录入到一个平台上管理,设计师可以到平台上挑选组件,并实时预览和调整组件,整个过程所见即所得,平台会将调整结果生成一串代码,只要将代码交给前端,就可以用这串代码在平台上重现设计师修改后的组件,并能一键复制组件的html/css/js代码,快速应用…

  前面几篇都是在介绍结构化与非结构化的数据存储,本篇换换口味介绍一下框架是如何实现前端组件化开发的.首先得感谢Vue.ElementUI等优秀的前端开源项目,这些项目帮助作者快速实现了框架的两个前端工程(IDE及Web应用)的开发.   当初框架的设计目标是:前端.后端.存储端统统一锅端,为什么这么设计,一方面是想减少开发人员对于开发环境及各类工具的安装配置时间,另一方面是想消除各端之间的集成调试问题,使开发人员更多的关注数据结构.业务逻辑.用户界面的设计与开发.为了达成这一目标,作者在框架的…

一.前言 在项目的前端开发中,对于绝大多数的小伙伴来说,当然,也包括我,不可避免的需要在项目中使用到一些第三方的组件包.这时,团队中的小伙伴是选择直接去组件的官网上下载,还是图省事直接在网上搜索,然后从一些来源不明的地方下载,我们就无法管控了.同时,我们添加的组件间可能存在各种依赖关系,如果我们没有正确下载引用的话,到最后可能还是无法正常使用. 因此,如何从可信的源下载组件包,以及如何轻松的解决各个组件间的依赖关系就成了我们需要解决的问题,那么,有没有一种工具可以帮我们解决这一问题?你好,有的,…

在前端开发中可能会遇到将相同的功能模板集合成一个组件,供他人调用,这样可以减少重复造轮子,也可以节约人力.财力,更能够提高代码的可维护度:下面将通过详细的步骤教你如何构建一个Vue前端组件. 1.在本机上安装好NodeJs,并配置好环境变量 (1)NodeJs的下载地址:点击进入下载页面 我这里是下载64位Windows安装包(.msi),大家可以根据自己电脑系统选择相应的版本即可. (2)下载NodeJs后双击它,采用默认设置,一直点击下一步,直到Finish为止.需要说明的是,在安装Node…

转发一篇尤老师对vue.js的介绍,了解vue.js的来龙去脉.不过现在已经是2.0了,也有添加一些新的东西,当然有些东西也改了. Vue.js:轻量高效的前端组件化方案 Vue.js 是我在2014年2月开源的一个前端开发库,通过简洁的 API 提供高效的数据绑定和灵活的组件系统.在前端纷繁复杂的生态中,Vue.js有幸受到一定程度的关注,目前在 GitHub上已经有5000+的star.本文将从各方面对Vue.js做一个深入的介绍. 开发初衷 2013年末,我还在Google Creativ…

为什么会有WUI前端组件,我们接触的UI组件如:YUI.EXTjs.EasyUI,这些组件虽然提供了丰富的UI,并且一定程度上缩短了开始时间,单这些组件提供的页面风格是统一的,我们的产品风格不可能像这些UI组件提供的风格,而且像ExtJs组件规模较大,也会影响效率. 所以我开发了WUI组件(属于UI组件类型),他的特点: 1.每个功能组件都是单独的JS文件,再开发过程中,用到那个功能就引入哪个js文件. 2.每个功能组件代码小,不影响加载速度. 3.每个功能组件的class丰富,开发这可以根据组…