2025年pont - 搭建前后端之桥，vue+pont搭建前端项目

科技前沿 • 2025-02-21 20:29 • 阅读 42

大家好，我是讯享网，很高兴认识大家。

概念

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" }