在vue中使用swagger-ui和swagger-editor

需求：在vue中使用swagger-ui和swagger-editor

Swagger Editor是一个开源编辑器，用于设计，定义和记录Swagger规范中的RESTful API。Swagger Editor的源代码可以在GitHub中找到。

swagger官方文档：

https://swagger.io/docs/open-source-tools/swagger-editor/

https://swagger.io/docs/open-source-tools/swagger-ui/usage/installation/

swagger-editor

效果图：

1. 首先，npm安装对应模块

npm i swagger-editor-dist

2)自定义组件代码：

<template>
    <div>
        <div id="swagger-editor">div>
    div>
template>
<script>
    import SwaggerEditorBundle from "swagger-editor-dist/swagger-editor-bundle";
    import SwaggerEditorStandalonePreset from "swagger-editor-dist/swagger-editor-standalone-preset"

    export default {
        name: "index",
        created() {
        },
        mounted() {
            SwaggerEditorBundle({
                dom_id: '#swagger-editor',
                layout: 'StandaloneLayout',
                presets: [
                    SwaggerEditorStandalonePreset
                ]
            })
        }
    }
script>

<style scoped>
    @import "~swagger-editor/dist/swagger-editor.css";
    /deep/ .SplitPane  {
        position: relative !important;
    }
style>

swagger-ui

效果：

1. npm安装对应模块

npm i swagger-ui

2)代码

<template>
    <div class="importSwagger" style="width: 80%;margin: 10px auto;text-align: center;">
        <div id="swagger-ui" >
        div>
    div>
template>
<script>
    import { SwaggerUIBundle,SwaggerUIStandalonePreset } from 'swagger-ui-dist'
    export default {
        name: "ImportSwagger",
        data() {
            return {
            }
        },
        created() {
        },
        mounted() {
            const ui = SwaggerUIBundle({
                url: "https://petstore.swagger.io/v2/swagger.json",
                dom_id: '#swagger-ui',
                presets: [
                    SwaggerUIBundle.presets.apis,
                    SwaggerUIStandalonePreset
                ],
                layout: "StandaloneLayout"
            })
        }
    }
script>
<style scoped>
    @import "~swagger-ui-dist/swagger-ui.css";
style>

暂做记录。。