jfvue-doc

jfvue-doc

jfvue-doc用于展示文档

安装

npm install jfvue-doc

引用

import JfvueDoc from 'jfvue-doc'

注册组件

export default {
  components: {
    JfvueDoc
  }
}

使用组件

<jfvue-doc :data="JfTemplateData"></jfvue-doc>

支持格式

1. h3 大标题
2. code 代码格式
3. title 普通标题
4. desc 描述
5. shell-code 终端脚本
6. list 列表

数据格式

export default [
  {
    type: 'h3',
    text: '控制器'
  },
  {
    type: 'code',
    language: 'js',
    height: '400px',
    code: `
    /**
   \t* 项目实体
    \t* @param {*} params
    \t*/
    function ProjectVo(params) {
      const { filename } = params
      return {
        filename
      }
    }

    ProjectVo.prototype.swaggerDescription = {
      filename: '项目文件名'
    }

    module.exports = ProjectVo
    `
  },
  {
    type: 'title',
    text: '控制器方法定义'
  },
  {
    type: 'code',
    language: 'js',
    height: '150px',
    code: `
    function startServe(req, res) {
      const { filename } = ProjectVo(req.body) // 获取参数
      //...
    }
    `
  },
  {
    type: 'title',
    text: '配置接口文档'
  },
  {
    type: 'code',
    language: 'js',
    height: '200px',
    code: `
    exports.startServe = renderRequestType(
      startServe,
      'POST', // 方法类型 GET POST DELETE PUT
      ProjectVo,
      ProjectVo,
      '启动项目'
    )
    `
  },
  {
    type: 'desc',
    text: ``
  }
]

数据格式2

export default [
  {
    type: 'h3',
    text: 'Honeypot-Exmd'
  },
  {
    type: 'title',
    text: '安装'
  },
  {
    type: 'shell-code',
    rows: ['npm i honeypot-exmd -g']
  },
  {
    type: 'title',
    text: '创建项目'
  },
  {
    type: 'shell-code',
    rows: ['npm i honeypot-exmd -g']
  },
  {
    type: 'title',
    text: '目录结构'
  },
  {
    type: 'list',
    list: [
      {
        cols: [{ text: 'auxiliary', isLetter: true }, { text: '辅助功能，该部分不会随着项目打包到生产环境' }]
      },
      {
        cols: [{ text: 'bin', isLetter: true }, { text: '脚本' }]
      },
      {
        cols: [{ text: 'build', isLetter: true }, { text: '打包构建目录(没有的话可以手动新建)' }]
      },
      {
        cols: [{ text: 'config', isLetter: true }, { text: '配置文件目录' }]
      },
      {
        cols: [{ text: 'controller', isLetter: true }, { text: '控制器层，接口在这里面定义' }]
      },
      {
        cols: [{ text: 'models', isLetter: true }, { text: '数据表逆向工程生成的model目录，model映射数据表' }]
      },
      {
        cols: [{ text: 'router', isLetter: true }, { text: '地址路由配置，可以在这里面加api前缀' }]
      },
      {
        cols: [{ text: 'vo', isLetter: true }, { text: '视图层实体类，定义接收参数和返回参数，以及参数说明以供接口文档' }]
      }
    ]
  },
  {
    type: 'title',
    text: '运行项目'
  },
  {
    type: 'shell-code',
    rows: ['cd TestBackEnd', 'npm install', 'npm run server']
  },
  {
    type: 'title',
    text: '构建项目'
  },
  {
    type: 'shell-code',
    rows: ['npm run build']
  },
  {
    type: 'title',
    text: '更新依赖库'
  },
  {
    type: 'shell-code',
    rows: ['npm run update:lib']
  },
  {
    type: 'title',
    text: '运行辅助项目',
    subTitle: '(该部分不会随着项目打包到生产环境)'
  },
  {
    type: 'shell-code',
    rows: ['npm run swagger']
  }
]