如何将Swager封装到vue中

将 Swagger 封装到 Vue 中的步骤如下：

1. 安装 Swagger UI

可以通过 npm 或 yarn 安装 Swagger UI：

npm install swagger-ui --save
# 或
yarn add swagger-ui

2. 在 Vue 中引入 Swagger UI

在 Vue 中引入 Swagger UI 需要用到 webpack 的代码分割功能，先安装 `@babel/plugin-syntax-dynamic-import`：

npm install @babel/plugin-syntax-dynamic-import --save-dev
# 或
yarn add @babel/plugin-syntax-dynamic-import --dev

在 babel.config.js 中添加插件：

module.exports = {
  plugins: ['@babel/plugin-syntax-dynamic-import'],
};

在 Vue 单文件组件中，可以通过以下方式引入 Swagger UI：

<template>
  <div id="swagger-ui"></div>
</template>

<script>
export default {
  mounted() {
    import('swagger-ui').then((SwaggerUI) => {
      const ui = SwaggerUI.default({
        // Swagger UI 配置项
        url: 'http://petstore.swagger.io/v2/swagger.json',
        dom_id: '#swagger-ui',
      });
    });
  },
};
</script>

这样就可以在 Vue 中使用 Swagger UI 了。需要注意的是，Swagger UI 配置项可以根据具体需求进行修改。