本文主要是介绍vue3 ts pinia openapi vue-query pnpm docker前端架构小记，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
1.引言
开发中，我们是否经常遇到以下痛点：
- 项目越大，启动和热更新越来越慢，启动都要花个3-5分钟以上
- 没有类型保障，接口返回的Object不拿到真实数据都不知道有哪些字段，接手别人js项目(无类型)很痛苦
- 需要手动写很多request函数去调用api，手动书写各种判断枚举值
- 缺乏代码格式化，代码错误检查，git commit规范
- 数据流要么太死板，对ts支持很差(dva)，要么太灵活(mobx)
- npm包管理问题，比如：多版本的npm包冲突、npm包依赖嵌套、npm僵尸包、npm依赖包平铺到nodule_modules首层
- 手动变更接口的loading状态、手动管理modal的visible状态
- 很多热门的开源chatgpt产品: dify、fastgpt，他们都用很新的前端技术，但是仍然是大批量的手写request函数，手写各种枚举，以及interface，很痛苦
此前端架构优势以及展望如下：
- 支持自动根据openapi生成api request函数、类型、枚举等, openapi数据格式参考
- 支持前端工程化，完美的ts开发体验，ts + eslint + tslint + prettier + commitlint + husky
- 支持前端容器化(需要安装docker环境)，跨环境运行
- 同步接口请求状态，实现自动loading
- 支持接口联动，方便跨父子组件刷新相关联的接口
- 支持容器化变量注入，无需前端配置文件写死，方便通过 k8s 动态注入
基于以上痛点，我整合了一些开源技术搭了一套脚手架供自己使用，并分享给大家学习，如果对你有帮助请在github上面给我一个star🙏🙏🙏
俗话说王婆卖瓜，自卖自夸，各位大佬轻喷！！！
openapi 规范文档对于前端来说，绝对是超级省事的，必须安排起来！！！
很多细节没有在文章中提及！！！
2.脚手架核心技术
- 打包编译 - vite
- 包管理 - pnpm
- 编程语言 - typescript
- 前端框架 - vue3
- 路由 - vue-router4
- UI组件库 - element-plus
- 全局数据共享 - pinia
- 自动生成api - openapi
- 网络请求 - axios
- 数据请求利器 - vue-query
- 通用hook - vueuse
- hack - babel
- 代码检查 - eslint
- ts代码检查插件 - typescript-eslint
- 代码美化 - prettier
- git钩子 - husky
- commit格式化 -commitlint
2.自动基于后端openapi文件生成request函数
// src/core/openapi/index.ts// 示例代码
generateService({// openapi地址schemaPath: `${appConfig.baseURL}/${urlPath}`,// 文件生成目录serversPath: "./src",// 自定义网络请求函数路径requestImportStatement: `/// <reference types="./typings.d.ts" />\nimport request from "@request"`,// 代码组织命名空间, 例如：Apinamespace: "Api",
});
3.调用接口示例
// HelloGet是一个基于axios的promise请求
export async function HelloGet(// 叠加生成的Param类型 (非body参数swagger默认没有生成对象)params: Api.HelloGetParams,options?: { [key: string]: any },
) {return request<Api.HelloResp>("/demo-docker/api/v1/hello", {method: "GET",params: {...params,},...(options || {}),});
}// 自动调用接口获取数据
const name = ref("zhangsan");
const { data, isPending, refetch } = useQuery({queryKey: ["helloGet", name],queryFn: () => HelloGet({ name: name.value || "" }),
});// HelloPost是一个基于axios的promise请求
export async function HelloPost(body: Api.HelloPostParam, options?: { [key: string]: any }) {return request<Api.HelloResp>("/demo-docker/api/v1/hello", {method: "POST",headers: {"Content-Type": "application/json",},data: body,...(options || {}),});
}// 提交编辑数据
const queryClient = useQueryClient();
const userStore = useUserStore();
const { mutate, isPending } = useMutation({mutationFn: HelloPost,onSuccess: (res) => {// 第一种刷新方式：修改storeuserStore.updateUserInfo({ name: res.data });// 第二种刷新方式：通过清除vue-query缓存keyqueryClient.invalidateQueries({ queryKey: ["helloGet"] });},
});mutate({ name: "lisi" });
4.技术说明
- 自动生成api request函数(openapi): 后端接入apenapi后，前端可以根据openapi文件自动生成api request，后端通常使用swagger转换成openapi规范供前端使用
- 通用hook(vueuse): 一个hook工具库，就是hook增强，该库可以依据个人喜好选择是否使用
- 前端日志(sentry): 暂时未集成，需要进一步调研实用性和可用性
5.前端架构源码
点此查看前端架构源码
这篇关于vue3 ts pinia openapi vue-query pnpm docker前端架构小记的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
