市面上目前已有各种各样的UI组件库，比如 Element 和 iView ，他们的强大毋庸置疑。但是我们面临的情况是需求越来越复杂，当它们不能再满足我们需求的时候，这个时候就有必要开发一套属于自己团队的组件库了。 所以本文的目的就是让读者能通过此文，小能做一个简单的插件供人使用，大能架构和维护一个组件库不在话下。 以下一个简单的颜色选择器插件 vColorPicker 讲述从开发到上线到npm的流程。 vColorPicker 插件 DEMO 一、技术栈...
说明 整理了一份简单的源码，放在github，有需要参考的同学自取~ 简介 微信小程序上线已有一年多时间啦，自美团的mpvue(基于 Vue.js 的小程序开发框架，从底层支持 Vue.js 语法和构建工具体系)问世也过去了好几个月。 前端技术日新月异，小程序的UI框架也层出不穷。 例如： WeUI: 一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。(github) ZanUI: 有赞移...
AJAX是用来对服务器进行异步HTTP调用的一系列web开发技术客户端框架。 AJAX即Asynchronous JavaScript and XML（异步JavaScript和XML）。AJAX曾是web开发界的一个常见名称，许多流行的JavaScript小部件都是使用AJAX构建的。例如，有些特定的用户交互（如按下按钮）会异步调用到服务器，服务器会检索数据并将其返回给客户端——所有这些都不需要重新加载网页。 AJAX的现代化重新引入 JavaScript已经进化了，现在我们使用前端库和/或...
MinUI 是基于微信小程序自定义组件特性开发而成的一套简洁、易用、高效的组件库，适用场景广，覆盖小程序原生框架、各种小程序组件主流框架等，并且提供了高效的命令行工具。MinUI 组件库包含了很多基础的组件，其中 badge 徽章组件是一个很常用的基础元件， MinUI 中 badge 组件的效果图如下：各式各样的类型都有哦，是不是看起来很方便很快捷的样子(^_^)。可以打开微信扫一扫下面的小程序二维码先一睹为快：下面介绍 badge 组件的...
前言 2017年是Vue.js大爆发的一年，React迎来了一个强有力的竞争对手，王者地位受到挑战（撰写此文时github上Vue与React的star数量已逼近）。我们团队这一年有十多个大型项目采用了Vue技术栈，在开发效率、页面性能、可维护性等方面都有不错的收效。 我们希望把这些项目中可复用的功能组件提取出来，给后续项目使用，以减少重复开发，提高效率，同时也为了致敬前端界“出一个框架，造一遍轮子”的行规， 一个基于Vue 2的移动端UI组...
在vue2.0中引用element-ui组件库 element-ui是由饿了么团队开发的一套基于 Vue 2.0 的桌面端组件库。 官网： http://element.eleme.io/ 安装 npm i element-ui -S引用完整的element-ui import ElementUI from element-ui; import element-ui/lib/theme-chalk/index.css; Vue.use(ElementUI);需要注意的是，样式文件需要单独引入。 如果报错，在 webpack.config.js 中配置 file_loader。可以在 rules 数组内直接增加下面这个配置项：...
背景在公司的主要工作是组件库（基于vue的ui组件库，类似element-ui）的开发，也已经有两个多月，期间一直觉得项目的开发构建太慢，每次开发打开开发环境需要 40s 左右，简直不能忍。前前后后尝试了各种优化手段，但是都不理想。终于在今天，找到了问题所在，构建速度提升了 50% 以上，现在只需要 17s 左右，整个心情都好了。现在记录一下所用到的各种优化手段，因为是开发环境，所以只考虑构建速度。 各种配置项的优化主要是对一些...
背景 前段时间对公司内部的组件库(类似element-ui)做了打包体积优化，现在抽点时间记录下。以前也做过构建速度的优化，具体可以看组件库的webpack构建速度优化 一些存在的问题 最开始打包是基于webpack的，在按需加载上存在的体积冗余会比较大，如： webpack打包特有的模块加载器函数，这部分其实有些多余，最好去掉使用babel转码时，babel带来的helper函数全部是内联状态，需要转成import或require来引入使用transform-rumtime对一...
制作了一套自己的组件库，并发布到npm上，项目代码见https://github.com/hamger/hg-vcomponents 前期准备有一个npm账号安装了vue-cli搭建项目 vue init webpack hg-vcomponents cd hg-vcomponents cnpm install目录结构 - vue-flag-list+ build+ dist // 存放发布到npm的代码- src- components // 存放组件源代码 和 README.md- arrowsarrows.vueREADME.md- roundround.vueREADME.mdindex.js // 组件导出文件- examples // 存放组件...
最近针对日常业务需求使用react封装了一套[组件库], 大概记录下整个开发过程中的心得。由于篇幅原因，在这里只对开发过程中比较纠结的选型和打包等进行讨论，后续再对具体组件的封装进行讨论。概述我们都知道，组件化的开发模式对于我们的开发效率有着极大的提升，针对我们日常使用的基本组件进行封装，可以大量的简化我们对于基本UI的关注度，让我们的工作聚焦在业务逻辑上，很好的分离业务与基础UI的代码，使得整个项目更有调理，...
通过多次爬坑，发现了这些监听滚动来加载更多的组件的共同点， 因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的， 所以是进入页面则直接触发一次，当监听到滚动事件之后，继续加载更多， 所以对于无限滚动加载不需要写首次载入列表的函数， 代码如下： html: //父组件 <div v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="1000"><LifeLists :loadingTextBtn="loadingTe...
AT-UI 是一款基于 Vue.js 2.0 的轻量级、模块化前端 UI 组件库，主要用于快速开发 PC 网站产品。 专门为桌面应用程序构建，AT-UI 提供了一套 npm + webpack + babel 前端开发工作流程，以及一个体面的干净整洁的 UI 组件。 特性 基于 Vue 开发的 UI 组件基于 npm + webpack + babel 的工作流，支持 ES2015CSS 样式独立，保证不同的框架实现都能保持统一的 UI 风格（ 详见： AT-UI Style ）提供友好的 API，可灵活的使用组件支持环境...
cube-ui 是滴滴公司的技术团队基于 Vue.js 实现的精致移动端组件库。很赞，虽然组件还不是很多，但是基本场景是够用了，感谢开源！ 首先创建一个vue项目 vue init webpack my-project cd my-project npm install安装cube-uinpm install cube-ui -S官方推荐使用 babel-plugin-transform-modules 插件，可以更优雅引入组件模块以及对应的样式。 npm install babel-plugin-transform-modules -D然后配置下这个插件，修改 .babelrc：(添...
最近公司在研发app,选择了基于Vue框架的vux组件库，现总结在实现上拉刷新功能遇到的坑： 1.问题：只刷新一次，解决方法：需要自己手动重置状态 this.scrollerStatus.pullupStatus = ‘default， 2.问题：不能滚动，解决方法：因为启用keep-alive缓存，需要设置 activated () {this.$refs.scroller.reset() } 如果还没效果，请在获取后台数据后，执行如下代码 this.$nxtTick(() => {this.$refs.scroller.reset()}) 贴出整个页面的...
官网地址 http://mint-ui.github.io/ Mint UI 包含丰富的 CSS 和 JS 组件，能够满足日常的移动端开发需要。通过它，可以快速构建出风格统一的页面，提升开发效率。 真正意义上的按需加载组件。可以只加载声明过的组件及其样式文件，无需再纠结文件体积过大。 考虑到移动端的性能门槛，Mint UI 采用 CSS3 处理各种动效，避免浏览器进行不必要的重绘和重排，从而使用户获得流畅顺滑的体验。 依托 Vue.js 高效的组件化方案，Mint UI 做...