当前位置：首页 > VUE

用vue实现docsify

2026-02-20 12:39:35VUE

使用 Vue 实现 Docsify 的功能

Docsify 是一个动态生成文档网站的工具，它基于 Markdown 文件并无需构建步骤。虽然 Docsify 本身不是基于 Vue 的，但可以通过 Vue 实现类似的功能。

安装必要的依赖

需要安装 Vue 和相关的路由插件来模拟 Docsify 的动态文档加载功能。

npm install vue vue-router marked

配置 Vue 路由

创建一个 Vue 项目并配置动态路由，以根据 URL 加载不同的 Markdown 文件。

import Vue from 'vue'
import VueRouter from 'vue-router'
import marked from 'marked'

Vue.use(VueRouter)

const routes = [
  {
    path: '/:page*',
    component: {
      template: `<div v-html="content"></div>`,
      data() {
        return { content: '' }
      },
      async created() {
        const page = this.$route.params.page || 'README'
        const response = await fetch(`/docs/${page}.md`)
        const text = await response.text()
        this.content = marked(text)
      }
    }
  }
]

const router = new VueRouter({
  mode: 'history',
  routes
})

new Vue({
  router
}).$mount('#app')

创建 Markdown 文件

在项目的 public/docs 目录下放置 Markdown 文件，例如 README.md 和 guide.md。这些文件将被动态加载并渲染。

渲染 Markdown 内容

使用 marked 库将 Markdown 转换为 HTML 并在 Vue 组件中渲染。确保在 created 或 mounted 钩子中异步加载内容。

实现侧边栏

创建一个侧边栏组件，动态生成导航链接。

<template>
  <div class="sidebar">
    <ul>
      <li v-for="doc in docs" :key="doc.name">
        <router-link :to="`/${doc.name}`">{{ doc.title }}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      docs: [
        { name: 'README', title: 'Home' },
        { name: 'guide', title: 'Guide' }
      ]
    }
  }
}
</script>