@cxkit/version-vue

@cxkit 为 Vue 3 生态打造的高集成度、开箱即用的前端版本检测适配层。

利用 Vue 3 的 Composition API 和 Reactivity 响应式代理系统，将底层事件总线与组件数据无缝拉皮，省去了你监听重绘与手动同步缓存的成本。

安装

npm install @cxkit/version-vue

核心 API

1. 挂载入口 initVersionUpdate(options)

必须在使用任何组件与钩子前，在一处全局（例如 main.ts 或 App.vue setup 层）调用一次初始化。传入配置和 @cxkit/version-core 完全一致。

import { initVersionUpdate } from '@cxkit/version-vue'

initVersionUpdate({
  pollInterval: 60 * 1000 * 5, // 每 5 分钟轮询检测一次 version.json
})

2. UI 预置组件 <VersionUpdateIndicator>

我们内置并导出了一个极其美观、带一定进出场动画逻辑的 Vue 原生悬浮组件。只要将其引入到 Vue App 最外层视图树即可完成所有全自动打通。

<script setup>
import { VersionUpdateIndicator } from '@cxkit/version-vue'
import '@cxkit/version-vue/style.css'
</script>

<template>
  <VersionUpdateIndicator 
    title="发现新版可用" 
    message="代码已重新打包发版，请立刻刷新以体验最新逻辑"
    cancelText="取消"
    confirmText="马上重载"
  />
  <router-view />
</template>

3. 高度自定义 Hooks useVersionUpdate()

当且仅当你不想用内置的悬浮卡片 UI，需要引入 Ant Design 或是 Element Plus 自己包装 Dialog 时，可使用状态暴露接口进行极简开发。

import { useVersionUpdate, confirmVersionUpdate, deferVersionUpdate } from '@cxkit/version-vue'
import { ElDialog, ElButton } from 'element-plus'

const { hasPendingUpdate, latestVersion } = useVersionUpdate() // 完全 Reactive 支持！

<template>
  <ElDialog v-model="hasPendingUpdate" title="更新可用">
    <ElButton @click="confirmVersionUpdate">立刻自动刷新</ElButton>
    <ElButton @click="deferVersionUpdate">推迟弹窗</ElButton>
  </ElDialog>
</template>

阅读完整文档

详细接入流程请访问 官方开发文档。