Vue中使用Swagger-Editor(一）

新建一个vue项目

yarn global add @vue/cli $ 
vue create antd-demo

我这里用了Ant Design of Vue，安装一下组件：

cd antd-demo
npm i --save ant-design-vue@4.x

常见错误

certificate has expired

解决办法：执行 yarn config set "strict-ssl" false -g

info There appears to be trouble with your network connection. Retrying...

解决办法： yarn config set registry registry.npm.taobao.org

Swagger-editor安装

npm i swagger-editor-dist 在src目录下创建swagger-editor\dist目录，并且复制antd-demo\node_modules\swagger-editor-dist下的文件到其中：

使用

将App.vue中的内容替换为：

<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"
    import "./swagger-editor/dist/swagger-editor.css"

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

启动

yarn install
yarn serve

查看： http://localhost:8080/

ok,开源的代码里面提供了很多函数给我们使用，可以基于这个来改造来使用