Vue gitbook 实现

Vue 与 GitBook 集成实现

将 Vue 集成到 GitBook 中可以通过插件或自定义构建流程实现，以下是具体方法：

使用 gitbook-plugin-vue 插件

安装插件到 GitBook 项目：

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

在 book.json 中配置插件：

{
  "plugins": ["vue"]
}

插件会自动处理 .vue 文件，支持单文件组件开发。

自定义 Webpack 集成

通过 GitBook 的插件系统集成 Webpack，实现更灵活的 Vue 支持：

创建自定义插件目录结构：

.
├── book.json
├── node_modules
└── plugins
    └── vue-webpack
        ├── index.js
        └── package.json

在插件 index.js 中配置 Webpack：

module.exports = {
  website: {
    assets: './assets',
    js: [
      'bundle.js'
    ]
  },
  hooks: {
    'page:before': function(page) {
      // 处理 Vue 组件
      return page;
    }
  }
};

配置 Webpack 构建 Vue 组件：

// webpack.config.js
module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/plugins/vue-webpack/assets'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  }
};

直接引入 Vue 运行时

对于简单需求，可直接在 GitBook 的 HTML 文件中引入 Vue：

{% raw %}
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>

<div id="app">
  {{ message }}
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue in GitBook!'
  }
})
</script>
{% endraw %}

构建流程集成

对于需要完整 Vue 开发体验的项目：

1. 单独构建 Vue 应用为静态资源
2. 将输出文件放入 GitBook 的 _book 目录
3. 通过 GitBook 的 HTML 注入机制引入

构建命令示例：

vue-cli-service build --dest gitbook/_book/vue-app

在 GitBook 模板中引用：

<script src="./vue-app/js/chunk-vendors.js"></script>
<script src="./vue-app/js/app.js"></script>

注意事项

• GitBook 默认使用 Markdown 渲染，Vue 的模板语法可能与 Markdown 冲突，需使用 {% raw %} 标签包裹
• 动态路由功能在静态生成的 GitBook 中受限
• 复杂的 Vuex 状态管理需考虑静态生成的限制
• 插件版本需与 GitBook 主版本兼容