趣谈前端-腾讯云开发者社区

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

趣谈前端

一个重度代码洁癖者，对前端生态的总结，思考和探索。

专栏成员

302

文章

384748

阅读量

37

订阅数

前端: 从零封装一个可实时预览的json编辑器

react json npm vue.js

做为一名前端开发人员,掌握vue/react/angular等框架已经是必不可少的技能了,我们都知道,vue或react等MVVM框架提倡组件化开发,这样一方面可以提高组件复用性和可扩展性,另一方面也带来了项目开发的灵活性和可维护,方便多人开发协作.接下来文章将介绍如何使用react,开发一个自定义json编辑器组件.我们这里使用了jsoneditor这个第三方库,官方地址: jsoneditor 通过实现一个json在线编辑器,来学习如何一步步封装自己的组件(不限于react,vue,原理类似).

2022-02-09

1.6K0

从零开发一款轻量级滑动验证码插件(深度复盘)

canvas npm react jquery ui

之前一直在分享低代码和可视化的文章，其中涉及到很多有意思的知识点和设计思想，今天继续和大家分享一款非常有趣且实用的前端实战项目——从零基于 react + canvas 实现一个滑动验证码，并将其发布到 npm 上供他人使用。当然如果大家更喜欢 vue 的开发方式，也不用担心，文中的设计思想和思路都是通用的，如果大家想学习如何封装 vue 组件并发布到 npm 上，也可以参考我之前的文章: 从零到一教你基于vue开发一个组件库。

2022-02-09

1.9K0

5分钟教你快速掌握Github Action持续集成

npm git github 开源 cci 持续集成

前段时间发布了一个滑动验证组件包 react-slider-vertify , 里面用到了 Github Action 作为自动化打包发布工具, 我们只需要简单的配置就能轻松的在执行 git push 的时候自动打包项目并将其一键发布到 npm 中.

2022-02-09

1.8K0

使用React 360创建虚拟现实体验

图像处理 javascript html react npm

这真的可能吗？是的，随着React 360的引入，现在可以用JavaScript来创建虚拟现实体验。

2021-06-08

1.6K0

从零到一教你基于vue开发一个组件库

vue.js npm javascript

Vue是一套用于构建用户界面的渐进式框架,目前有越来越多的开发者在学习和使用.在笔者写完从0到1教你搭建前端团队的组件系统之后很多朋友希望了解一下如何搭建基于vue的组件系统,所以作为这篇文章的补充,本文来总结一下如何搭建基于vue的组件库.

2020-03-12

1.7K0

从0到1教你搭建前端团队的组件系统（高级进阶必备）

npm react babel.js 打包 javascript

随着vue/react这类以数据驱动为主的web框架的不断完善和壮大，越来越多的前端团队开始着手搭建内部的组件库。虽然目前市面上已经有很多功能强大且完善的组件库供我们使用，比如基于react的开源组件库ant-design，material，又比如基于vue的开源组件库elementUI，iView等。

2020-02-26

5K0

精通React/Vue系列之实现一个全局提示(Message)组件

本文是笔者写组件设计的第十一篇文章, 今天带大家实现一个同样比较特殊的组件——全局提示(Message)组件。我们看到的组件效果可能是这样的：

2020-02-26

3.4K0

精通React/Vue系列之手把手带你实现一个功能强大的通知提醒框(Notification)

本文是笔者写组件设计的第十篇文章, 今天带大家实现一个比较特殊的组件——通知提醒框(Notification)。该组件在诸如Antd或者elementUI等第三方组件库中也都会出现,主要用来为用户提供系统通知信息的.我们在调用它时并不像其他组件一样，通过引入组件标签来调用。比如Modal组件，我们一般这样来调用：

2020-02-26

2K0

《精通react/vue组件设计》之手把手实现一个轻量级可扩展的模态框(Modal)组件

react vue.js 编程算法 css npm

本文是笔者写组件设计的第九篇文章, 今天带大家实现一个轻量级且可灵活配置组合的模态框(Modal)组件, 该组件在诸如Antd或者elementUI等第三方组件库中都会出现,主要用来提供系统的用户反馈.

2020-02-19

2.7K0

《精通react/vue组件设计》之5分钟教你实现一个极具创意的加载(Loading)组件

react css vue.js npm 网站

本文是笔者写组件设计的第八篇文章, 今天带大家用5分钟实现一个极具创意的加载(loading)组件.涉及的核心知识点主要是css3相关特性, 如果大家非常熟悉,可直接跳过介绍直接看正文.

2020-02-19

9670

《精通react/vue组件设计》之实现一个健壮的警告提示(Alert)组件

react vue.js 网站 css npm

本文是笔者写组件设计的第七篇文章, 今天带大家实现一个自带主题且可关闭的Alert组件, 该组件在诸如Antd或者elementUI等第三方组件库中都会出现,主要用来提供系统的用户反馈.

2020-02-19

9990

基于create-react-app打包编译自己的第三方UI组件库

npm react babel.js 网站打包

这篇文章主要是总结一下我们在工作中如何为公司开发内部的第三方UI组件，并通过npm install的方式安装的一些步骤和思路。在学习完这套发布方法后大家也可以快速的发布自己的UI库到npm，供他人使用，就比如elementUI或者Ant Design。

2019-10-25

2.2K0

前端组件/库打包利器rollup使用与配置实战

npm rollup.js babel.js 打包 webpack

写rollup的文章是因为笔者最近要规范前端开发的业务流程和架构，并提供内部公有组件库和工具库供团队使用。在查阅大量资料并对比了webpack和rollup的优缺点之后，最终选择rollup来作为打包工具，我们最终要实现通过npm的方式安装我们的组件库和工具库：

2019-10-23

2.5K0

一张图教你快速玩转vue-cli3

babel.js webpack npm css vue.js

本文系统的梳理了vue-cli3搭建项目的常见用法，目的在于让你快速掌握独立搭建vue项目的能力。你将会了解如下知识点：

2019-07-09

3K0

没有更多了

社区活动

【纪录片】中国数据库前世今生

穿越半个世纪，探寻中国数据库50年的发展历程

Python精品学习库

代码在线跑，知识轻松学

博客搬家 | 分享价值百万资源包

自行/邀约他人一键搬运博客，速成社区影响力并领取好礼

技术创作特训营·精选知识专栏

往期视频·千货材料·成员作品最新动态