共计 11 篇文章

使用 Proxy 构建响应式系统

💡本篇博文可能学到的知识点更好的理解 Vue 响应式工作原理学习 Vue 的设计模式学习 Proxy API使用 Proxy 实现观察者模式现代前端开发必不可少会用到的 Vue、React 等框架,这些框架的共同之处在于都提供了响应式(Reactive)和组件化(Composable)的视图组件,组件化开发重新定义了前端开发技术栈。结合前端构建工具以及基于框架出现的各种经过精心设计的UI组件库,让前端也进入到了一个工程化的时代。 ...

📊 搭建基于 Cube.js 的 Vue Dashboard

Cube.jsCube.js - 一个完整的开源数据分析解决方案:提供高性能的大规模数据集分析技术基础架构,同时提供前端友好的API,用于构建仪表盘报表以及其他数据分析应用,它扮演了前端与后端之间的数据层角色。Cube.js 客户端执行查询,Cube.js 后端将业务逻辑(dimensions 和 measures 以及 filters) ...

🚀 记一次前端性能优化

工作中一直在做一款公司内部的BI工具,将数据可视化的报表赋能给业务人员,报表配置者通过简单的拖拽操作即可生成报表。随着系统不断的完善,加上运维推广,我们积累了越来越多的用户。这时候用户体验的方方面面都体现出来了。我们也停下产品的功能迭代,将整个系统进行优化,旨在提升用户体验。以下是我对前端项目的优化总结。Webpack 打包优化项目中在使用的 Webpack 版本是3.x,本次优化的方案仍然是基于Webpack3.x版本的 Vue 脚手架进行优化。 ...

使用 Drag and Drop 给Web应用提升交互体验

什么是 Drag and Drop (拖放)? 简单来说,HTML5 提供了 Drag and Drop API,允许用户用鼠标选中一个可拖动元素,移动鼠标拖放到一个可放置到元素的过程。 我相信每个人都或多或少接触过拖放,比如浏览器多标签页之间的可拖放排序、手机中的App可以随便拖放排序等等,Drag and Drop ...

Webpack 2.x 在Vue2.x项目中的应用

最近开发的项目里使用了 Webpack + Vue 全家桶技术栈,鉴于Webpack的版本迭代还在高速发展期,我使用了Webpack2.x的稳定版本2.2.0来作为脚手架的打包构建工具。 管理资源 加载CSS style-loader css-loader less-loader extract-text-webpack-plugin 项目中使用了 less 作为css的预处理,并且使用 ...