我的环境

2022年1月23日。
系统是macOS 12.1，但同事的win10也能用。
vscode的pont插件v1.0.13
npm包中的pont插件v1.0.13

搭建pont环境

首先，后端要开好swagger，V2以上的。开好后让后端给你swagger相关的json文件地址，里头的格式类似这样。如果你的后端目前尚不能提供这种json文件，那么你可以暂时用这个petstore.swagger.io/v2/swagger.… ，以便后面的学习。
其次，vscode 安装pont插件。

然后

# 安装pont-engine，作为开发环境的依赖（不会用于正式环境）
npm install pont-engine -D

# 执行刚安装的pont-engine的脚本
npx pont start

于是会像这样

让我来简单解释一下：

数据源地址就填写前面所说的json文件地址。
其他选项就是字面意思而已。
不使用自动化mocks服务原因是，现在只是为了说明如何搭建pont环境。
"使用内置模版”填写true、fetch的原因是，便于你理解，不会溺死。用了模板之后，可以与之后生成的js文件一一对应，很容易在里头加点你希望的语句，比如console.log。

这样之后，目录里会生成一份pont-config.json文件。点击vscode底部的黄字“generate”，于是肉眼可见地生成了services目录和pontTemplate.ts文件。

好了，现在接口代码已经生成了。

让我们来看看生成的./services/mods/index.js，和./services/index.js。这两个文件都提到了window，代表了全局挂载。那么，在你的项目入口处import ‘@/../service之后，在你的页面文件输入API.，即可弹出接口提示，然后使用即可。

pont环境完成了，现在可以删除掉pont-engine的开发依赖了npm uninstall pont-engine。

使用axios

你可以在./services/pontCore.js文件里看到这个

同时你检查一下./services/mods/xxx/xxx.js，可以看见

所以我们在上一部分搭建pont环境的项目入口文件中，也就是import ’service’的那个文件，如此如此：

import { PontCore } from './service/pontCore';
import myRequest from '@/utils/myRequest';
PontCore.useFetch(myRequest);

接下来就是喜闻乐见的封装axios的环节了。首先要npm install axios。然后就

/* 当前是@/utils/myRequest.ts文件 */
import axios from 'axios';
export default function myRequest(url: string, option?: any) {
    console.log('myRequest的参数', url, option);
    return axios
    .request({ url, ...option })
    .then((res: any) => {
        if (!res?.data) throw new Error('接口没有返回数据');
        if (res.data.code !== 200) throw new Error(`错误的状态码${res.data.code}`);
            return res.data;
        })
    .catch((error) => {
        throw new Error(error);
    });
}

常用配置

如果你用了eslint和prettier，以及git。我建议都ignore掉，不然eslint报错，prettier频繁美化，git频繁上传，频繁程度视接口API修改频繁程度而定。

eslint的ignore

创建.eslintrcignore文件，里头添加service

prettier的ignore

创建.prettierignore文件（也许你有了），里头添加service

git的ignore

创建.gitignore文件（也许你有了），里头添加 service

ignore注意事项

eslintignore和prettierignore的如果没生效，重启vscode试试。
gitignore的如果没生效，参考下这篇解决gitignore不生效问题

搭建pont环境 with axios