简易Vue组件编写教程，实现查询和显示文件下载次数

发布于: 2026/01/31 17:04:35

VitePress网站建设Vue插件

内容概要

此文介绍了通过编写一个Vue组件，实现显示文件下载次数的方法，需要提前布置好后端，公开API访问

此文介绍了通过编写一个Vue组件，实现显示文件下载次数的功能。

统计文件下载数

统计文件下载次数需要在后端进行，并且由于此方案未使用SSR，需要公开查询API。

详见R2&D1&Workers联动。

编写组件

为了使组件实例在Markdown中能够接受参数，需要使用Vue的Props特性。

然后在组件的onMounted钩子中fetch我们的api，获取下载次数，更新页面数据。

.vitepress/theme/components/DownloadCounter.vue

<script setup lang="ts">

import { ref, onMounted } from "vue";

const props = defineProps<{ // 使用Props接受文件名和下载链接属性
    fileName: string,
    filePath: string
}>()

const count = ref<number>(0); // 文件下载次数

onMounted(async () => {
    try {
        const response = await fetch(`https://api.example.com/downloads?file=${encodeURIComponent(props.filePath)}`);
        const data = await response.json();
        if (data && typeof data.count === 'number') {
            count.value = data.count;
        }
    } catch (error) {
        console.error('Failed to fetch download count:', error);
    }
});

</script>

<template>
    <span class="download-counter">下载链接：<a :href="filePath" target="_self">{{ fileName }}</a> 下载次数：{{ count }}</span>
</template>

注册组件

这里选用全局注册的方式，修改index.ts如下。

.vitepress/theme/index.ts

import type { Theme } from 'vitepress'
import DefaultTheme from 'vitepress/theme'

import DownloadCounter from './components/DownloadCounter.vue'

export default {
  extends: DefaultTheme,
  enhanceApp({ app }) {
    // 注册自定义全局组件
    app.component('DownloadCounter', DownloadCounter)
  }
} satisfies Theme

这里可能会报错：找不到模块“.vue”或其相应的类型声明。ts(2307)

这是因为TypeScript默认无法识别.vue文件类型，需要添加env.d.ts声明其类型。

.vitepress/env.d.ts

/// <reference types="vite/client" />
declare module '*.vue' {
    import type { DefineComponent } from 'vue'
    // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
    const component: DefineComponent<{}, {}, any>
    export default component
}

使用组件

该组件的使用非常简单，由于已经进行了全局注册，直接在Markdown中引用即可。

<DownloadCounter fileName="archive.zip" filePath="https://r2.example.com/archive.zip" />

CORS问题

如果查询API没有与博客部署在同一域名下，可能会因为跨源资源共享（CORS）问题导致API访问请求失败，此时请参考这篇文章。