用vue实现docsify
使用 Vue 实现 Docsify 风格的文档网站
Vue 可以结合其他工具实现类似 Docsify 的文档网站功能。Docsify 本身是一个动态生成文档网站的工具，但通过 Vue 和相关插件也能实现类似效果。
安装 Vue 和相关依赖
确保已安装 Node.js 和 npm/yarn。创建一个新的 Vue 项目并安装必要依赖：
vue create vue-docsify
cd vue-docsify
npm install vue-router markdown-it vue-markdown-loader --save-dev配置 Markdown 支持
在 vue.config.js 中配置 Webpack 以支持 Markdown 文件：
module.exports = {
chainWebpack: config => {
config.module
.rule('md')
.test(/\.md$/)
.use('vue-loader')
.loader('vue-loader')
.end()
.use('vue-markdown-loader')
.loader('vue-markdown-loader')
.options({
raw: true,
preventExtract: true
})
}
}创建文档结构
在 src 目录下创建文档结构：
src/
docs/
README.md
guide.md
components/
Sidebar.vue
Navbar.vue实现路由和布局
修改 src/router/index.js 设置路由：
import Vue from 'vue'
import Router from 'vue-router'
import Home from '../views/Home.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: () => import('../views/Docs.vue'),
props: { path: 'README' }
},
{
path: '/:doc',
name: 'doc',
component: () => import('../views/Docs.vue'),
props: true
}
]
})创建文档视图组件
创建 src/views/Docs.vue：
<template>
<div class="docs-container">
<Sidebar />
<div class="doc-content">
<component :is="docComponent" />
</div>
</div>
</template>
<script>
import Sidebar from '@/components/Sidebar.vue'
export default {
components: { Sidebar },
props: ['path'],
computed: {
docComponent() {
return () => import(`@/docs/${this.path || 'README'}.md`)
}
}
}
</script>实现侧边栏导航
创建 src/components/Sidebar.vue：
<template>
<div class="sidebar">
<router-link to="/">Home</router-link>
<router-link to="/guide">Guide</router-link>
</div>
</template>
<script>
export default {
name: 'Sidebar'
}
</script>添加样式
在 src/App.vue 中添加基本布局样式：
<style>
.docs-container {
display: flex;
min-height: 100vh;
}
.sidebar {
width: 250px;
padding: 20px;
background: #f5f5f5;
}
.doc-content {
flex: 1;
padding: 20px;
}
</style>运行项目
启动开发服务器：
npm run serve高级功能扩展
要实现更接近 Docsify 的功能，可以添加以下扩展：
- 代码高亮：安装
highlight.js并配置 - 主题切换：使用 CSS 变量实现
- 搜索功能：添加
flexsearch或lunr实现客户端搜索 - SEO 优化：使用
vue-meta管理元标签
这种方法利用 Vue 的生态系统实现了 Docsify 的核心功能，同时保留了 Vue 的灵活性和扩展性。相比原版 Docsify，这种实现方式更适合需要深度定制或与其他 Vue 功能集成的项目。
