v-resize-rx

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

5W3H 八何分析法

0. 准备工作

src文件夹下新建index.ts pnpm init/ npm init 生成package.json tsc --init 生成tsconfig.json 新建一个vite.config.ts文件 新建index.d.ts文件

需要安装两个库

pnpm i vue -D pnpm i vite -D -D 一定是为vue服务的,没必要安装这个插件再安装一遍vue

1. 如何监听dom宽高变化

用了CodeGeeX插件通过手机号注册的 index.ts是实现结果

2. 如何用vite打包库

1. 配置vite.config.ts打包,用的是es moudle语法 vite官方中文文档配置中构建选项->lib->点击库模式build配置
2. package.json配置scripts中 "build": "vite build"
3. npm run build 打包成功后会在dist文件夹下生成两个文件***.umd.js和***.mjs
4. 编写声明文件index.d.ts declare// install

3. 如何发布npm

1. 配置package.json main对应的是dist/v-resize-rx.umd.js,module对应的是dist/v-resize-rx.mjs
2. files npm上发的目录 ["dist","index.d.ts"]
3. 每次修改发布时需要修改版本号version
4. npm 需要添加账号npm adduser,http://www.npmjs.com并单击注册。我的账号密码:theyouth221 youthThe_251
5. npm login
6. npm publish