自动化测试平台开发（十一）：在线文档 - VuePress

这里简单介绍通过VuePress构建项目在线文档。

一、VuePress

一个Vue 驱动的静态网站生成器，以 Markdown 为中心的项目结构。

VuePress 有很多优点：

界面简洁优雅
容易上手（半小时能搭好整个项目）
更好的兼容、扩展 Markdown 语法

二、开始搭建

# 1. 创建并进入一个新目录
mkdir tpDocs && cd tpDocs

# 2. 使用你喜欢的包管理器进行初始化 
yarn init # npm init 

# 3. 将 VuePress 安装为本地依赖 不推荐全局安装 
VuePress yarn add -D vuepress # npm install -D vuepress

# 4. 创建你的第一篇文档
mkdir docs && echo \'# Hello VuePress\' > docs/README.md

# 在 p5. ackage.json 中添加一些 scripts

{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}

# 6. 在本地启动服务器

yarn docs:dev # npm run docs:dev


# 此时文件夹结构

tpDocs
+--docs
+----README.md
+--package.json

运行访问 http://localhost:8080

三、配置

tpDocs\docs目录下多了个 .vuepress文件夹

tpDocs
+--docs
+----.vuepress
+------ dist   //打包后的文件夹
+----README.md
+--package.json
+--node_modules

在.vuepress 创建config.js 文件, 添加

module.exports = {
  base: \'/auto-test-platform/\',
  port: 9529,
  theme: \'\',
  plugins: [
    \'@vuepress/back-to-top\', //此处是添加返回顶部的插件
    \'@vuepress/medium-zoom\'
  ],
  title: \'testPlatform.docs\',
  head: [
    // 设置 favicon.ico
    [\'link\', {rel: \'icon\', href: \'/assets/img/logo.png\'}],
  ],
  themeConfig: {
    logo: \'/assets/img/logo.png\',
    // 右上角搜索框后面的菜单导航
    nav: [
      {text: \'首页\', link: \'/\'},
      {text: \'工单分析\', link: \'/order/\'},
      {text: \'精准测试\', link: \'/precise/\'},
      {
        text: \'接口测试\', link: \'/api_test/\',
        items: [
          {text: \'指南\', link: \'/api_test/guide/\'},
          {text: \'进阶篇\', link: \'/api_test/advanced/\'},
          {text: \'注意事项\', link: \'/api_test/attentions/\'},
          {text: \'开发手册\', link: \'/api_test/develop/\'}
        ]
      },
      {text: \'GitLab\', link: \'https://github.com/txu2k8/auto-test-platform.git\'}
    ],

    //左侧菜单
    sidebar: [
      {
        title: \'接口测试\',
        path: \'/api_test/\',
        collapsable: true, // 可选的, 默认值是 true,
        sidebarDepth: 2, // 可选的, 默认值是 1
        children: [
          {
            title: \'指南\',
            path: \'/api_test/guide/\',
            collapsable: true,
            children: [
              {title: \'快速上手\', path: \'/api_test/guide/quick_start/\', collapsable: true, sidebarDepth: 2},
              {title: \'第一个测试\', path: \'/api_test/guide/first_test/\', collapsable: true, sidebarDepth: 2},
            ]
          },
          {
            title: \'进阶篇\',
            path: \'/api_test/advanced/\',
            collapsable: true,
            children: [
              {title: \'权限管理\', path: \'/api_test/advanced/permission/\', collapsable: true, sidebarDepth: 2},
              {title: \'全局配置\', path: \'/api_test/advanced/global_config/\', collapsable: true, sidebarDepth: 2},
              {title: \'项目管理\', path: \'/api_test/advanced/project_manager/\', collapsable: true, sidebarDepth: 2},
              {
                title: \'接口管理\',
                path: \'/api_test/advanced/api_manager/\',
                collapsable: true,
                children: [
                  {title: \'接口操作\', path: \'/api_test/advanced/api_manager/api_opt/\', collapsable: true, sidebarDepth: 2},
                  {title: \'接口详情\', path: \'/api_test/advanced/api_manager/api_detail/\', collapsable: true, sidebarDepth: 2},
                  {title: \'统计分析\', path: \'/api_test/advanced/api_manager/api_sa/\', collapsable: true, sidebarDepth: 2},
                  {title: \'YAPI同步\', path: \'/api_test/advanced/api_manager/yapi_sync/\', collapsable: true, sidebarDepth: 2},
                  {title: \'查重工具\', path: \'/api_test/advanced/api_manager/api_duplicate/\', collapsable: true, sidebarDepth: 2},
                ]
              },
              {
                title: \'用例管理\',
                path: \'/api_test/advanced/case_manager/\',
                collapsable: true,
                sidebarDepth: 2,
                children: [
                  {title: \'用例操作\', path: \'/api_test/advanced/case_manager/case_opt/\', collapsable: true, sidebarDepth: 2},
                  {title: \'用例设计\', path: \'/api_test/advanced/case_manager/case_design/\', collapsable: true, sidebarDepth: 2},
                ]
              },
              {title: \'测试执行\', path: \'/api_test/advanced/run_test/\', collapsable: true, sidebarDepth: 2},
              {title: \'测试结果\', path: \'/api_test/advanced/test_result/\', collapsable: true, sidebarDepth: 2},
              {title: \'附1：数据校验方法\', path: \'/api_test/advanced/validate_rules/\', collapsable: true, sidebarDepth: 2},
              {title: \'附2：内建方法\', path: \'/api_test/advanced/builtin_functions/\', collapsable: true, sidebarDepth: 2},
            ]
          },
          {
            title: \'注意事项\',
            path: \'/api_test/attentions/\',
            collapsable: true,
            children: [
              {title: \'需要处理的事\', path: \'/api_test/attentions/reclaim/\', collapsable: true, sidebarDepth: 2},
              {title: \'用例设计规范\', path: \'/api_test/attentions/case_design_standard/\', collapsable: true, sidebarDepth: 2},
            ]
          },
          {
            title: \'开发手册\',
            path: \'/api_test/develop/\',
            collapsable: true,
            children: [
              {title: \'背景\', path: \'/api_test/develop/background/\', collapsable: true, sidebarDepth: 2},
              {title: \'技术栈与设计\', path: \'/api_test/develop/tech_design/\', collapsable: true, sidebarDepth: 2},
              {
                title: \'后端接口实现\',
                path: \'/api_test/develop/backend/\',
                collapsable: true, sidebarDepth: 2,
                children: [
                  {title: \'表设计\', path: \'/api_test/develop/backend/models/\', collapsable: true, sidebarDepth: 2},
                  {title: \'过滤器\', path: \'/api_test/develop/backend/filters/\', collapsable: true, sidebarDepth: 2},
                  {title: \'序列化\', path: \'/api_test/develop/backend/serializers/\', collapsable: true, sidebarDepth: 2},
                  {title: \'接口响应\', path: \'/api_test/develop/backend/response/\', collapsable: true, sidebarDepth: 2},
                  {title: \'DRF封装\', path: \'/api_test/develop/backend/drf/\', collapsable: true, sidebarDepth: 2},
                  {title: \'DRF自定义\', path: \'/api_test/develop/backend/drf_custom/\', collapsable: true, sidebarDepth: 2},
                  {title: \'批量处理\', path: \'/api_test/develop/backend/drf_bulk/\', collapsable: true, sidebarDepth: 2},
                  {title: \'路由注册\', path: \'/api_test/develop/backend/urls/\', collapsable: true, sidebarDepth: 2},
                  {title: \'测试\', path: \'/api_test/develop/backend/test/\', collapsable: true, sidebarDepth: 2},
                ]
              },
              {title: \'执行引擎\', path: \'/api_test/develop/execution_engine/\', collapsable: true, sidebarDepth: 2},
              {title: \'自定义内建方法\', path: \'/api_test/develop/new_builtin_functions/\', collapsable: true, sidebarDepth: 2},
              {title: \'自定义校验方法\', path: \'/api_test/develop/new_validate_rules/\', collapsable: true, sidebarDepth: 2},
              {title: \'任务管理\', path: \'/api_test/develop/task_manager/\', collapsable: true, sidebarDepth: 2},
              {title: \'YAPI同步\', path: \'/api_test/develop/yapi_sync/\', collapsable: true, sidebarDepth: 2},
              {title: \'导入导出\', path: \'/api_test/develop/import_export/\', collapsable: true, sidebarDepth: 2},
            ]
          },
          {
            title: \'常见问题解答\',
            path: \'/api_test/qa/\',
            collapsable: true,
            sidebarDepth: 2
          }
        ]
      }
    ]
  }
}

四、代码发布

关于发布问题：首先我们知道在打包后的文件都是静态文件之前的MD文件都被打包成html静态文件了,其次在文件config.js中 base至关重要。

通过服务器发布
在服务器上安装Apache或者nginx 这里拿nginx举例：至于nginx 安装以及配置文件的解读使用我这里就不详述了，不了解的可以自己查阅相关文件

//为了简单明了 我们把打包好的文件放入nginx中html文件下  之前的文件可以清空
server {
        listen  8081;  //监听8081端口
        server_name  localhost; //localhost:8081即可指向也可写别名如local.vuepress.com.cn  那我们访问这个端口的别名加端口就可以
        location / {
            root   /nginx/nginx-1.9.15/html; //至关重要你的入口文件在本机的位置
            index  index.html index.htm; //入口文件
        }
    }

发布到GitHub，通过链接打开
详见自动化测试平台开发（十二）：部署 VuePress到 GitHub Pages

-------- THE END --------