从0搭建vue3组件库:Shake抖动组件( 二 ) _生活百科

说明
这里接收参数props以及事件emits使用了以泛型的形式定义，不了解的可以看下这个vuejs.org/api/sfc-script-setup.html#typescript-only-features" rel="external nofollow noreferrer">传送门。watch加了立即监听为了防止用户上来就赋值为true导致下次不触发。
单元测试新建shake.test.ts
import { describe, expect, it } from "vitest";import { mount } from '@vue/test-utils'import shake from '../shake.vue'// The component to testdescribe('test shake', () => { it("should render slot", () => { const wrapper = mount(shake, { slots: { default: 'Hello world' } }) // Assert the rendered text of the component expect(wrapper.text()).toContain('Hello world') }) it("should have class", () => { const wrapper = mount(shake, { props: { modelValue: true } }) expect(wrapper.classes()).toContain('k-shakeactive') })})这个单元测试的意思其实就是

slot传入Hello world,期望页面就会出现Hello world
props传入modelValue为true,那么组件就包含样式k-shakeactive

最后执行pnpm run coverage命令就会放下shake测试代码通过了

文章插图
导出打包发布这里和以往组件实现基本一样了，这里直接贴代码

shake/index.ts

import shake from './shake.vue'import { withInstall } from '@kitty-ui/utils'const Shake = withInstall(shake)export default Shake

src/index.ts

export { default as Button } from './button'export { default as Icon } from './icon'export { default as Link } from './link'export { default as Upload } from './upload'export { default as Shake } from './shake'最后执行
pnpm run build:kittypnpm run pnpm run build:kitty即可完成发布
写在最后组件库的所有实现细节可以关注公众号 web前端进阶获取，包括环境搭建，自动打包发布，文档搭建，vitest单元测试等等。