Howdyjs
一个包含Javascript插件、Vue3组件、Vue3指令的轻量工具组件库
An universal component packages of javascript plugins or tools
当前该仓库已使用
Vue3+Typescript，基于Vue2组件的旧版项目请前往howdy分支查看。
Link
组件
-
@howdyjs/mouse-menu
✨自定义右键菜单Vue3组件 -
@howdyjs/resize
✨通过拖拽更改元素尺寸插件 -
@howdyjs/to-drag
✨设置Dom可拖动插件 -
@howdyjs/to-control
✨拖拽更改元素大小与位置插件 -
@howdyjs/img-zoom
✨图片放大插件，支持按组浏览下一张图片 -
@howdyjs/animation-dialog
✨动画模态框Vue3组件 -
@howdyjs/size-observer
✨监听元素尺寸变化插件 -
@howdyjs/scroll
✨自定义滚动条插件 -
@howdyjs/standard-tabs
✨移动端标签页Vue3组件
开始使用
安装
// 新版已进行分包
npm i -S @howdyjs/XXX
// 旧版
npm i -S howdyjs使用
- 新版进行了分包，可按需安装相应的分包
- 新版的Vue组件只可在Vue3中使用，而指令做了向下兼容可同时在Vue2.X中使用
- 多数包是基于原生JS编写的，基本可直接原生使用，只是为了方便提供了Vue指令的封装形式
- 若需要在Vue2.X中使用，可使用旧版，旧版文档 参考此处
关于项目
Packages
- 使用Lerna进行分包管理，执行
npm run bootstrap项目初始化 - 使用Rollup进行打包，执行
npm run build:lib打包各个Packages - 已更新使用
rollup-plugin-esbuild加速打包
展示站点
- 开发环境及展示站点使用Vite搭建，lerna初始化、安装依赖、打包Packages，完成后执行
npm run example启动 - 站点路由文件使用
import.meta.glob读取文件目录自动生成，原则上不需更改路由文件
贡献与本地开发
在项目初始化后，执行npm run backup-package-json && npm run example可使展示站点直接引用项目中Packages的代码并实现热更新，但注意开发完后要执行npm run reset-package-json恢复各包的package.json。
原理是更改package.json的main字段指向开发的源文件，而发包的时候再将main字段入口文件指向打包后的index.js，后续有可能把这种方式更改为软连接的方式。
欢迎各种建议反馈与PR，感谢使用。
VIEW AUTHOR BLOG
License
All for MIT
Copyright (c) 2023 Leon.D