建议结合源码一起阅读，效果更好（这个 DEMO 使用的是 Vue 技术栈）。 1. 编辑器 先来看一下页面的整体结构。 这一节要讲的编辑器其实就是中间的画布。它的作用是：当从左边组件列表拖拽出一个组件放到画布中时，画布要把这个组件渲染出来。 用一个数组 componentDat…

在 Web 动画方面，有一套非常经典的原则 -- Twelve basic principles of animation，也就是关于动画的 12 个基本原则（也称之为迪士尼动画原则），网上对它的解读

前言 事情是这样的，前几天我接到一个外包工头的新需求，某品牌要搭建一个在线VR展厅，用户可以在手机上通过陀螺仪或者拖动来360度全景参观展厅，这个VR展厅里会有一些信息点，点击之后可以呈现更多信息（视

在做电商类应用时，难免会遇到商品主图实现放大镜效果的场景，现有的基于Vue的第三方包不多并且无法直接复用，今天，我来分享一种高稳定性的基于 Vue 的图片放大镜方法。 放大镜的原理用一句话概括，就是根据小图上的鼠标位置去定位大图。 相信原理图已经画的很明白了， 图中，左侧框是小…

之前使用过 Vue 开发后台、中台项目，也做过移动端 H5，弄过一点小的前端架构。每做一个项目都会收获了不一样的经验和理解。下面我把这些点点滴滴的经验总结下来，做一个系列的文章分享和阶段性的总结。 自己手动规范 git 的提交原则或者团队统一制定。这个靠自觉，好习惯养成之后就没…

埋点即监控用户在应用表现层的行为，于产品迭代而言至关重要。埋点数据分析是产品需求的 来源，检验功能是否达预期的 佐证。前端较服务端更接近用户，本小白将在此对前端埋点统计方案述说一二。 不同产品对数据的关注角度不同，可按需采集。如信息流产品对停留时长的关注度更高（统计页面访问 &…

当我们拿到一个 PC 端页面的设计稿的时候，往往会发现页面的布局并不是随意的，而是遵循的一定的规律：行与行之间会以某种方式对齐。对于这样的设计稿，我们可以使用栅格布局来实现。 早在 Bootstrap 一统江湖的时代，栅格布局的概念就已深入人心，整个布局就是一个二维结构，包括列…

上面代码是常用prerender-spa-plugin的配置，staticDir预渲染输出的文件地址，routes要做预渲染的路由，minify压缩相关的配置，renderer渲染引擎相关的配置，可以传入自定以的渲染引擎或者直接使用默认的PuppeteerRenderer，re…