Vue gitbook 实现

Vue 与 GitBook 集成实现

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

使用 gitbook-plugin-vue 插件

安装插件：

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

配置 book.json：

{
  "plugins": ["vue"]
}

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

自定义 GitBook 构建流程

通过 webpack 集成 Vue：

安装依赖：

npm install vue vue-loader css-loader vue-template-compiler --save-dev

创建 webpack.config.js：

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  }
}

修改 GitBook 构建命令：

{
  "scripts": {
    "build": "webpack && gitbook build"
  }
}

直接引入 Vue CDN

在 book.json 中配置：

{
  "pluginsConfig": {
    "include-codeblock": {
      "template": "<div id='app'></div>",
      "script": "https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"
    }
  }
}

创建 Vue 组件示例

在 GitBook 的 Markdown 文件中：

<!-- vue-component.md -->
<div id="app">
  {{ message }}
</div>

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

注意事项

• GitBook 默认不支持动态内容，需通过插件或构建工具扩展
• 静态站点生成时 Vue 的响应式功能可能受限
• 复杂项目建议使用 VuePress 替代 GitBook

替代方案：VuePress

对于深度集成 Vue 的项目，VuePress 是更合适的选择：

初始化项目：

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

启动开发服务器：

vuepress dev

构建静态站点：

vuepress build

VuePress 内置 Vue 支持，提供更好的开发体验和更完善的 Vue 集成功能。