概念

pont 在法语中是“桥”的意思，寓意着前后端之间的桥梁。

Pont 把 swagger、rap、dip 等多种接口文档平台，转换成 Pont 元数据。Pont 利用接口元数据，可以高度定制化生成前端接口层代码，接口 mock 平台和接口测试平台。

其中 swagger 数据源，Pont 已经完美支持。并在一些大型项目中使用了近两年，各种高度定制化需求都可以满足。

安装pont

# 选择一个你喜欢的包管理器

# NPM
$ npm i -g pont-engine

# Yarn
$ yarn global add pont-engine

# pnpm
$ pnpm add -g pont-engine

安装 VSCode 插件

打开 VSCode 插件商店，输入 vscode-pont 搜索安装

初始化

使用 pont start 命令，快速创建初始模板

沉浸式接口开发

插件安装成功后，点击 Pont 图标，打开面板进行进一步操作。更多插件相关请参考 插件文档

vue 引入pont

在一个正常的vue项目中，引入pont 达到替换项目中 api 目的。 当然这里不是说把整个api都去掉，而是把api中定义各个接口路径、参数等去掉，只保留axios 请求相关逻辑。

如下图，这是一个正常的前端vue项目，只是多了pont相关配置的文件和目录

pont-config.json

//pont-config.json
{
    
    
  "templatePath": "src/pont/pontTemplate",
  "fetchMethodPath":"src/pont/fetchMethodPath",
  "outDir": "src/pont/services",
  "mocks": {
    
    
    "enable": false,
    "basePath": "",
    "port": 8082
  },
  "origins":[
    // 多数据源地址配置
    {
    
    
      "name":"demo1",
      "originUrl": "https://xxx.xxx.com/v2/swagger.json"
    },
    {
    
    
      "name":"demo2",
      "originUrl": "https://www.fastmock.site/xxx/xxx/vscode"
    }
  ],
  "templateType": "fetch"
}