一个包含 Javascript 插件、Vue3 组件、Vue3 指令的轻量工具组件库
A universal component packages of javascript plugins or tools

Link

• ⚡Github
• 💾NPM

---

组件

• @clownjs/animation-dialog
  动画模态框 Vue3 组件

• @clownjs/size-observer
  监听元素尺寸变化插件

• @clownjs/mouse-menu
  自定义右键菜单 Vue3 组件

• @clownjs/yaml-edit
  yaml 编辑 Vue3 组件

• @clownjs/resize
  通过拖拽更改元素尺寸插件

• @clownjs/typer
  打字机展示文本效果

• @clownjs/sakura
  canvas的花瓣飘零效果

---

开始使用

安装

npm i -S @clownjs/XXX

使用

• 新版进行了分包，可按需安装相应的分包
• 新版的 Vue 组件只可在 Vue3 中使用，而指令做了向下兼容可同时在 Vue2.X 中使用
• 多数包是基于原生 JS 编写的，基本可直接原生使用，只是为了方便提供了 VUE 指令的封装形式

关于项目

Packages

• 使用lerna进行分包管理，执行npm run bootstrap项目初始化
• 使用rollup进行打包， 执行npm run build:pkg打包各 Packages，包含 cjs、es 和其 d.ts 文件

展示站点

• 开发环境及展示站点使用vite搭建，lerna 初始化、安装依赖、打包 Packages，完成后执行npm run example启动
• 站点路由文件使用import.meta.glob读取文件目录自动生成，原则上不需更改路由文件

贡献与本地开发

1. 方法 1

在项目初始化后，执行npm run backup-package-json && npm run example可使展示站点直接引用项目中 Packages 的代码并实现热更新，但注意开发完后要执行npm run reset-package-json恢复各包的package.json。

原理是更改package.json的 main 字段指向开发的源文件，而发包的时候再将 main 字段入口文件指向打包后的index.js，后续有可能把这种方式更改为软连接的方式。

2. 方法 2

在对应的 packages 目录下执行 npm link 在项目根目录下执行 npm link @clownjs/ + packageName 即可生成对应的软链接

# 批量关联本地npm包
npm run batch-link

3. 组件包预览调试

npm run example

4. 创建新的组件包

npm run gen

参考资料

howdyjs