v-resize-bin

通过创建一个“vue3+vite+ts”项目，使用自定义 hook 和自定义指令实现窗口拖拽功能并打包发布到 npm 上

需求：

实现一个函数同时支持 hook 和 自定义指令 去监听 dom 宽高的变化

5w3h 八何分析法：

1. 如何监听 dom 宽高变化 答：index.ts 实现
2. 如何用 vite 打包库 答：书写 vite.config.ts：vite 官网-配置-构建选项-右侧 build.lib-相关内容：库模式 参考相关配置 书写 package.json：在 scripts 中加入 "build": "vite build" 执行 npm run build 打包-----打包后有两个文件：.mjs 即为 es module 模式，即 export {}，.umd.js 即支持 amd cmd cjs(也就是 node.js 的规范) 全局变量模式，它会压缩一下
3. 如何发布 npm 答：书写 package.json： A、修改 main 为 dist/v-resize-bin.umd.js -----当使用 require 时就会找 main 命令，去找 .umd.js B、增加一个 module 为 dist/v-resize-bin.mjs -----当使用 import 时就会找 module 命令，去找 .mjs C、增加 files 选项(往 npm 上面发布的一个目录) D、修订一下 version 版本号 发布步骤： A、需要有 npm 账号，没有的话需要执行命令：npm adduser 进行添加(填写账号密码邮箱验证码之类的进行注册) B、执行命令 npm login，根据提示进行登录 C、执行命令 npm publish 发布即可 最后可以到 npm 官网搜索你的 插件名 进行查看
4. 测试：新建 vue demo 项目验证该插件是否可用： 答：新建 vue demo 安装我们的插件 npm i v-resize-bin 单独使用：引入我们的插件 import useResize from 'v-resize-bin'，在 onMounted 函数中调用 useResize(document.querySelector('#resize), (e) => console.log('被拖拽元素的宽高信息',e)) 全局使用：main.js 引入 import useResize from 'v-resize-bin'，注册 app.use(useResize) 为全局自定义指令使用 v-resize="(e) => console.log('被拖拽元素的宽高信息', e)"

构建项目结构：

1. src 下新建一个 index.ts
2. npm init：初始化项目，生成 package.json 文件
3. tsc --init：生成一个 ts 的配置文件 tsconfig.json
4. 根目录新建一个 vite.config.ts 配置文件
5. 根目录新建一个 index.d.ts 声明文件
6. npm i vue -D：安装 vue3 依赖
7. npm i vite -D：安装 vite 依赖