摘要:
本篇文章将为我们的组件库添加一个新成员:Input组件。其中Input组件要实现的功能有: 基础用法 禁用状态 尺寸大小 输入长度 可清空 密码框 带Icon的输入框 文本域 自适应文本高度的文本域 复合型输入框 每个功能的实现代码都做了精简,方便大家快速定位到核心逻辑,接下来就开始对这些功能进行一 阅读全文
摘要:
今天看到一篇文章中提到了一个好用的工具release-it。刚好可以用在我正在开发的vue3组件库。纸上得来终觉浅,绝知此事要躬行,说干就干,下面就介绍如何将release-it应用到实际项目中,让组件库可以自动化发布、管理版本号、生成 changelog、tag等 项目调整 在使用这个工具之前先对 阅读全文
摘要:
相信大家在前端开发中都使用过很多前端脚手架,如vue-cli,create-vite,create-vue等;本篇文章将会为大家详细介绍这些前端脚手架是如何实现的,并且从零实现一个create-kitty脚手架发布到npm上。 pnpm搭建Monorepo环境 使用pnpm管理对项目进行管理是非常方 阅读全文
摘要:
先看下效果 其实就是个抖动效果组件,实现起来也非常简单。之所以做这样一个组件是为了后面写Form表单的时候会用到它做一个规则校验,比如下面一个简单的登录页面,当点击登录会提示用户哪个信息没输入,当然这只是一个简陋的demo 接下来就开始我们的Shake组件实现 CSS样式 当你需要抖动的时候就给它添 阅读全文
摘要:
作为一个程序员如果你想要找到你心仪的工作,不可避免的就会问到很多八股文,虽然有的和工作没有半毛钱关系,但是你如果想要通过面试还必须得会。所以我最近开始总结一些面试题,一是为了加强自己的理解能够找到一份好的工作,二是为了尽可能的帮助更多的小伙伴能够快速掌握相关知识或者顺利通过面试🎉。 本篇文章介绍了 阅读全文
摘要:
中秋节到了,就想着用CSS画一个月亮送给园友们吧。但是就画一个月亮也太简单了些,于是便加了一些星星点缀以及流星坠落的效果。这篇文章就用纯CSS为大家实现一个“流星赶月”的效果。 实现效果 点击运行查看 画个月亮 首先我们先让全屏背景变成黑色,然后实现一个大月亮🌕,并加点"渐变",“光晕"等效果 h 阅读全文
摘要:
前端埋点对于那些营销活动的项目是必须的,它可以反应出用户的喜好与习惯,从而让项目的运营者们能够调整策略优化流程提高用户体验从而获取更多的$。这篇文章将实现一个Vue3版本的埋点上报插件,主要功能有 通过Vue自定义指令形式实现点击事件上报 提供手动调用上报方法 上报每个页面访问人数与次数(UV,PV 阅读全文
摘要:
Vue中的插槽相信使用过Vue的小伙伴或多或少的都用过,但是你是否了解它全部用法呢?本篇文章就为大家带来Vue3中插槽的全部用法来帮助大家查漏补缺。 什么是插槽 简单来说就是子组件中的提供给父组件使用的一个坑位,用<slot></slot> 表示,父组件可以在这个坑位中填充任何模板代码然后子组件中< 阅读全文
摘要:
button组件几乎是每个组件库都有的;其实实现一个button组件是很简单的。本篇文章将带你一步一步的实现一个button组件。如果你想了解完整的组件库搭建,你可以先看使用Vite和TypeScript带你从零打造一个属于自己的Vue3组件库,这篇文章有详细介绍。当然如果你只想知道一个button 阅读全文
摘要:
Vue中组件通信方式有很多,其中Vue2和Vue3实现起来也会有很多差异;本文将通过选项式API 组合式API以及setup三种不同实现方式全面介绍Vue2和Vue3的组件通信方式。其中将要实现的通信方式如下表所示 | 方式 | Vue2 | Vue3 | | | | | | 父传子 | props 阅读全文