市面上目前已有各种各样的UI组件库,比如 Element 和 iView,他们的强大毋庸置疑.但是我们面临的情况是需求越来越复杂,当它们不能再满足我们需求的时候,这个时候就有必要开发一套属于自己团队的组件库了. 为何要进行组件库开发? 如果你所在的公司对于页面的样式没有什么要求,那么你只要随便拿一个组件库来用就行了,比如element.iView等等,不用再重复造轮子了:如果你目前只有个人用一个组件,或者是只对个别组件有要求,那么只要在你的工程里面开发一个.vue单文件组件就可以了:如果你的团队…

button组件几乎是每个组件库都有的:其实实现一个button组件是很简单的.本篇文章将带你一步一步的实现一个button组件.如果你想了解完整的组件库搭建,你可以先看使用Vite和TypeScript带你从零打造一个属于自己的Vue3组件库,这篇文章有详细介绍.当然如果你只想知道一个button组件如何开发出来的,只看这篇也就够了.(样式部分参造了elementui组件库) 首先我们先看下我们这个button组件要实现的功能 使用type,plain属性来定义按钮基本样式 round,siz…

先看下效果 其实就是个抖动效果组件,实现起来也非常简单.之所以做这样一个组件是为了后面写Form表单的时候会用到它做一个规则校验,比如下面一个简单的登录页面,当点击登录会提示用户哪个信息没输入,当然这只是一个简陋的demo 接下来就开始我们的Shake组件实现 CSS样式 当你需要抖动的时候就给它添加个抖动的类名,不需要就移除这个类名即可.抖动效果就用CSS3中的transform的平移属性加动画实现 @keyframes shake { 10%, 90% { transform: transl…

相信大家在前端开发中都使用过很多前端脚手架,如vue-cli,create-vite,create-vue等:本篇文章将会为大家详细介绍这些前端脚手架是如何实现的,并且从零实现一个create-kitty脚手架发布到npm上. pnpm搭建Monorepo环境 使用pnpm管理对项目进行管理是非常方便的,极大的解决了多个包在本地调试繁琐的问题. 什么是Monorepo? 就是指在一个大的项目仓库中,管理多个模块/包(package),这种类型的项目大都在项目根目录下有一个packages文件夹,…

今天看到一篇文章中提到了一个好用的工具release-it.刚好可以用在我正在开发的vue3组件库.纸上得来终觉浅,绝知此事要躬行,说干就干,下面就介绍如何将release-it应用到实际项目中,让组件库可以自动化发布.管理版本号.生成 changelog.tag等 项目调整 在使用这个工具之前先对组件库进行进行一些调整,这里仅是对项目本身的优化和release-it无关. 首先修改vite.config.ts将打包后的目录dist更改为kitty-ui 自动打包中的删除打包文件改成nodejs…

本篇文章将为我们的组件库添加一个新成员:Input组件.其中Input组件要实现的功能有: 基础用法 禁用状态 尺寸大小 输入长度 可清空 密码框 带Icon的输入框 文本域 自适应文本高度的文本域 复合型输入框 每个功能的实现代码都做了精简,方便大家快速定位到核心逻辑,接下来就开始对这些功能进行一一的实现. 基础用法 首先先新建一个input.vue文件,然后写入一个最基本的input输入框 <template> <div class="k-input"> &…

经过了两个月不到的开发时间,我们phonycode团队顺利的发布了小程序的UI组件库 wuss-ui 的第一个版本.目前大体预览如下 介绍 wussUI 现在有大概27个组件左右, 目前基础组件都有了,布局组件比较少.我们将会在wuss 第二期开发的时候添加更多关于布局的组件. 目前我们也在npm上发布了wussUI的第一个版本,欢迎直接下载使用. npm install wuss-weapp -s --production 目前,小程序也有大部分开源的组件库了,比如taroUI.vant-ui…

MinUI 是基于微信小程序自定义组件特性开发而成的一套简洁.易用.高效的组件库,适用场景广,覆盖小程序原生框架.小程序组件化框架等,并且提供了高效的命令行工具.MinUI 组件库包含了很多基础的组件,其中价格 price 组件是一个很常用的基础元件, MinUI 中 price 组件的效果图如下: 是不是看起来很方便很快捷的样子(^_^).可以打开微信扫一扫下面的小程序二维码先一睹为快: 下面介绍 price 组件的使用方式. 1.使用下列命令安装 Min-Cli,如已安装,请进入到下一步.M…

轻量级 Toast 弹窗 DEMO https://www.blazor.zone/toasts 基础用法: 用户操作时,右下角给予适当的提示信息 <ToastBox class="d-block" Options="@Options1" /> @code{ Options1 = new ToastOption { Title = "保存数据", IsAutoHide = false, Content = "保存数据成功,4…

上次发布的随笔忘记提供源代码了,今天特地来补充,如果有什么问题,欢迎大家为我修改指正. vue.config.js文件: const path = require('path') function resolve (dir) { return path.join(__dirname, '..', dir) } module.exports = { // 将entry指向examples pages: { index: { entry: 'examples/main.js', template:…