vue3 ts pinia openapi vue-query pnpm docker前端架构小记

本文主要是介绍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前端架构小记的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/380299

相关文章

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性,它允许开发者在HTML文档中添加更多的语义信息,以便于搜索引擎和浏览器更好地理解页面内容,本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中,表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式,感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中,表格主要通过< tab

Windows Docker端口占用错误及解决方案总结

《WindowsDocker端口占用错误及解决方案总结》在Windows环境下使用Docker容器时,端口占用错误是开发和运维中常见且棘手的问题,本文将深入剖析该问题的成因,介绍如何通过查看端口分配... 目录引言Windows docker 端口占用错误及解决方案汇总端口冲突形成原因解析诊断当前端口情况解

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统,可以同时控制行和列,相比Flex(一维布局),更适合用在整体页面布局或复杂模块结构中,:本文主要介绍前端CSSGri... 目录css Grid 布局详解(通俗易懂版)一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行

前端下载文件时如何后端返回的文件流一些常见方法

《前端下载文件时如何后端返回的文件流一些常见方法》:本文主要介绍前端下载文件时如何后端返回的文件流一些常见方法,包括使用Blob和URL.createObjectURL创建下载链接,以及处理带有C... 目录1. 使用 Blob 和 URL.createObjectURL 创建下载链接例子:使用 Blob

Vuex Actions多参数传递的解决方案

《VuexActions多参数传递的解决方案》在Vuex中,actions的设计默认只支持单个参数传递,这有时会限制我们的使用场景,下面我将详细介绍几种处理多参数传递的解决方案,从基础到高级,... 目录一、对象封装法(推荐)二、参数解构法三、柯里化函数法四、Payload 工厂函数五、TypeScript

Vue3使用router,params传参为空问题

《Vue3使用router,params传参为空问题》:本文主要介绍Vue3使用router,params传参为空问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录vue3使用China编程router,params传参为空1.使用query方式传参2.使用 Histo