无论是 vue2 全家桶还是 vue3 + vite + TypeScript,组件库的使用几乎大家都会,但自己开发一个独立组件库就不是每个人都掌握的,因为搭建组件库的基础开发环境,就会让很多同学望而却步.一个组件库应该至少要包括三个方面: 组件库的开发和打包: 组件库文档的开发和打包: 命令行工具 cli 快速创建新组件. 这几天 程序员优雅哥 搭建了一个组件库的基础脚手架: vue3-component-library-archetype 在这个脚手架的基础上,大家可以使用内置的 cli 快…

theme: nico 前言 随着前端技术的发展,业界涌现出了许多的UI组件库.例如我们熟知的ElementUI,Vant,AntDesign等等.但是作为一个前端开发者,你知道一个UI组件库是如何被打造出来的吗? 读完这篇文章你将学会: 如何使用pnpm搭建出一个menorepo环境 如何使用vite搭建一个基本的Vue3脚手架项目 如何开发调试一个自己的UI组件库 如何使用vite打包并发布自己的UI组件库 作为一个前端拥有一个属于自己的UI组件库是一件非常酷的事情.它不仅能让我们对组件的原…

1 yyg-cli 是什么 yyg-cli 是优雅哥开发的快速创建 vue3 项目的脚手架.在 npm 上发布了两个月,11月1日进行了大升级,发布 1.1.0 版本:支持创建 vue3 全家桶项目和 vue3 组件库项目.具体如下: vue3 全家桶项目 使用 yyg-cli 创建的 vue3 全家桶项目,底层基于优雅哥编写的开源项目 vue3-vite-archetype,默认整合如下库: - vite3.vue3 - typescript.tsx - vue router - pinia…

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

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

京东零售开源项目 NutUI 是一套京东风格的轻量级移动端 Vue 组件库,是开发和服务于移动 Web 界面的企业级产品.经过长时间的开发与打磨,NutUI 3.0 终于和大家见面了!3.0 版本在技术和视觉方面都做出了较大改进,让组件看起来更绚丽,用起来更舒服. 源码抢先看:https://github.com/jdf2e/nutui 3.0官网:https://nutui.jd.com/3x 全新改变 技术看点 拥抱 Vue3 引入Vue3新特性 Composition API.Telepo…

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

今天看到一篇文章中提到了一个好用的工具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"> &…

京东零售开源项目 NutUI 是一套京东风格的轻量级移动端 Vue 组件库,是开发和服务于移动 Web 界面的企业级产品.经过长时间的开发与打磨,NutUI 3.0 终于要和大家见面了!3.0 版本在技术和视觉方面都做出了较大改进,让组件看起来更绚丽,用起来更舒服. 源码抢先看:https://github.com/jdf2e/nutui 技术看点: 1. 拥抱 Vue3 引入 Vue3 新特性 Composition API.Teleport.Emits 等 破坏性变更,全面升级 采用组合式…