自定义指令 + hooks 双管齐下

实现一个监听元素变化的 hook

主要会用到一个新的 API resizeObserver 兼容性一般 可以做 polyfill

但是他可以监听元素的变化 执行回调函数 返回 contentRect 里面有变化之后的宽高。

1.初始化 npm --int tsc --init

npm i vue -D npm i vite -D

2.vite 打包准备 配置 vite.config.ts 参考库模式配置 修改 package.json

  "main": "dist/v-resize-pcf.umd.js", // umd commjs
  "module": "dist/v-resize-pcf.mjs", // esm
  <!-- 要上传到npm的文件 -->
  "files": [
    "dist",
    "index.d.ts"
  ],

3.npm 发包 注册账号 发包

<!-- 注意镜像地址不能登陆 -->
`npm addUser` // 注册
`npm login`
`npm publish`

全局安装也就是node的源管理器
npm install -g nrm

使用 nrm ls 查看当前源
nrm ls

切换到npm官方的源地址
nrm use npm

记得每次npm publish的时候也都要切换回来.正常安装包的时候可以
nrm use taobao切换到淘宝镜像源

发布成功后： npm i v-resize-pcf