v-resize-cmu

Process:

1. npm init
2. tsc init => 生成tsconfig.json (tsc 如果是无效命令，需要npm i -g typescript)
3. vite.config.ts
4. npm i vue -D : 这个项目一定是给vue使用的，所以不需要在安装插件的时候再安装一遍vue， -D devdependence
5. npm i vite -D

如何监听dom 宽高变化

自定义Hooks

• 使用new ResizeObserver 监听dom 宽高变化

<-- 自定义directive const install = (app: App) => { app.directive('resize', { mounted(el, binding) { useResize(el, binding.value) } }) }

useResize.install = install -->

发布

1. npm addUser
2. npm login
3. npm publish

package.json

• "main": "dist/v-resize-cmu.umd.js", // require 会去调用
• "module": "dist/v-resize-cmu-cmu.mjs", // import/export used
• files: [] 要发的目录

vite.config.ts

import {defineConfig} from 'vite' // UMD: 支持amd cmd cjs 全局变量模式 export default defineConfig({ build: { lib: { entry: 'src/index', name: 'useResoze' }, rollupOptions: { external: ['vue'], //忽略不想打包的内容 output: { globals: { useResize: 'useResize' // 提供全局变量给UMD使用 } } } }

})