Vue gitbook 实现

Vue 与 GitBook 集成实现文档站点

将 Vue 集成到 GitBook 中可以实现动态、交互式的文档站点。GitBook 本身基于 Markdown，但通过插件或自定义构建流程可引入 Vue 组件。

方法 1：使用 GitBook 插件 gitbook-plugin-vue
安装插件后，直接在 Markdown 文件中嵌入 Vue 组件：

npm install gitbook-plugin-vue --save-dev

在 book.json 中配置插件：

{
  "plugins": ["vue"]
}

Markdown 文件中使用 Vue：

<!-- 示例.vue -->
<template>
  <button @click="count++">点击 {{ count }}</button>
</template>
<script>
export default {
  data() { return { count: 0 } }
}
</script>

方法 2：通过 GitBook 自定义构建
利用 GitBook 的构建钩子注入 Vue 环境：

1. 创建自定义插件目录 gitbook-plugin-vue-env，在 index.js 中注入 Vue 资源：

   module.exports = {
   website: {
    assets: './assets',
    js: ['vue.min.js', 'main.js']
   }
   };

2. 在 main.js 中初始化 Vue 实例：

   document.addEventListener('DOMContentLoaded', () => {
   new Vue({ el: '#app' });
   });

方法 3：结合 VuePress 替代 GitBook
VuePress 是 Vue 驱动的静态站点生成器，更适合深度集成 Vue：

npm install -g vuepress
mkdir docs && cd docs
echo '# Hello VuePress' > README.md

在 .vuepress/config.js 中配置主题和插件，支持直接编写 Vue 单文件组件。

关键注意事项

• GitBook 官方已转向商业版本，开源版本可能缺乏维护。
• 动态功能需确保 GitBook 生成的 HTML 能加载 Vue 运行时。
• 复杂交互推荐使用 VuePress，其内置 Vue 生态支持。