{"id":21898320,"url":"https://github.com/AirPowerTeam/AirPower-Web","last_synced_at":"2025-08-21T17:31:35.909Z","repository":{"id":155710980,"uuid":"632502103","full_name":"HammCn/AirPower4T","owner":"HammCn","description":"🔥🔥🔥AirPower4T 是一个基于 Vue3 TypeScript Element Plus Vite 的开发基础库，使用 装饰器、面向对象、Hook 等前端开发方式。","archived":false,"fork":false,"pushed_at":"2024-04-20T10:24:26.000Z","size":9915,"stargazers_count":131,"open_issues_count":0,"forks_count":21,"subscribers_count":2,"default_branch":"web","last_synced_at":"2024-04-20T14:16:40.808Z","etag":null,"topics":["element-plus","frontend","oop","typescript","vite","vue3","vuejs"],"latest_commit_sha":null,"homepage":"https://hamm.cn","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/HammCn.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2023-04-25T14:36:58.000Z","updated_at":"2024-07-09T14:20:23.743Z","dependencies_parsed_at":null,"dependency_job_id":"85e7e905-819a-40ee-aa25-924510317b36","html_url":"https://github.com/HammCn/AirPower4T","commit_stats":null,"previous_names":[],"tags_count":73,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HammCn%2FAirPower4T","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HammCn%2FAirPower4T/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HammCn%2FAirPower4T/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HammCn%2FAirPower4T/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/HammCn","download_url":"https://codeload.github.com/HammCn/AirPower4T/tar.gz/refs/heads/web","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230523761,"owners_count":18239445,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["element-plus","frontend","oop","typescript","vite","vue3","vuejs"],"created_at":"2024-11-28T14:25:46.825Z","updated_at":"2025-08-21T17:31:30.621Z","avatar_url":"https://github.com/HammCn.png","language":"TypeScript","readme":"\u003cp align=\"center\"\u003e\n  \u003cimg width=\"300\" src=\"./assets/img/logo.png\"/\u003e \u003cb\u003e4T\u003c/b\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://svg.hamm.cn?key=Lang\u0026value=TypeScript\u0026bg=green\"/\u003e\n  \u003cimg src=\"https://svg.hamm.cn?key=Base\u0026value=Vue3\"/\u003e\n  \u003cimg src=\"https://svg.hamm.cn?key=Build\u0026value=Vite\"/\u003e\n  \u003cimg src=\"https://svg.hamm.cn?key=UI\u0026value=ElementPlus\"/\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\u003ca href=\"https://github.com/HammCn/AirPower4T\"\u003eGithub\u003c/a\u003e /\n  \u003ca href=\"https://gitee.com/air-power/AirPower4T\"\u003eGitee\u003c/a\u003e /  \u003ca href=\"./CHANGELOG.md\"\u003eCHANGELOG\u003c/a\u003e / \u003ca href=\"./docs/README.md\"\u003eDOCUMENT\u003c/a\u003e\n\u003c/p\u003e\n\n## 1️⃣ 这是个什么项目\n\n\u003e 你当前查看的是 `web` 分支，我们也同时提供了 `wechat`、`uniapp` 等分支：）\n\u003e 你可以先阅读 [掘金专栏](https://juejin.cn/post/7273290114921889807)\n\u003e 的一些文章，也可以体验 [线上示例DEMO](https://service.hamm.cn)，如果你喜欢这个项目，欢迎给我们大大的 ⭐️⭐️⭐️\n\n\u003e\n如需只使用工具包，可以使用我们提供的单独抽离的工具包项目 [AirPower@Github](https://github.com/HammCn/AirPower) / [AirPower@Gitee](https://gitee.com/air-power/AirPower)\n\n**AirPower4T** 是一个基于 `Vue3` `TypeScript` `Element Plus` `Vite`\n的开发基础库，使用面向对象、装饰器、Hooks等开发模式，内置了数据模型转换、表格表单装饰器配置、加解密和编码解码、网络请求、权限管理等常见后台功能以及页面组件，助力后台类系统的前端开发效率，同时保障了优雅的代码质量。\n\n**AirPower4T** 的灵感来自于 **Java SpringBoot JPA** 等后端开发思想，使用了大量的 **类**、**枚举**、**接口**、**装饰器** 等，\n提供了很多基于 **Element Plus** 的常用后台管理组件，帮助开发者快速开发 **Web 应用**。\n\n**AirPower4T** 的设计理念是 **面向对象编程**，将一切能抽象的功能、数据结构、服务封装为 **类**，\n使用类的继承来实现一些代码的复用，减少重复代码，使代码更加清晰易读。\n使用装饰器来实现一些 **常用组件**、**数据转换规则**、**前端显示文案** 等信息的配置，使组件的配置更集中、灵活、直观。\n\n## 2️⃣ 为何起名**AirPower**\n\n早期是子仓库方式的设计, 这个依赖库跟宿主项目在一起, 所以为了排前面, 选择使用**A**开头的单词, 后来想起 **Apple**\n家难产了的一个产品的名称, **AirPower**, 作者是Apple十年老粉, 那就顺便致敬下 **Apple**.\n\n## 3️⃣ 有哪些功能(设计)\n\n1. **Model** / **Entity** 所有的数据交互都以数据模型实例的方式进行, 不再直接使用JSON.\n2. **Service** 使用服务类对所有的网络请求进行抽象, 通过继承方式实现相似代码的复用\n3. **Component** 提供了很多后台管理系统常用的组件和一些反馈组件\n4. **Hook** 提供了与Service交互的一些通用的交互Hooks\n5. **Enum** 提供了很多很多很多的枚举\n6. **Decorator** 提供了很多很多很多的装饰器\n7. 提供了类似 **Java** BeanCopy 相关的数据转换方式, 提供了完整的面向对象实现\n8. ......\n\n## 4️⃣ 代码和截图展示\n\n\u003cimg width=\"24%\" src=\"./docs/img/1.png\"/\u003e\u003cimg width=\"24%\" src=\"./docs/img/2.png\"/\u003e\u003cimg width=\"24%\" src=\"./docs/img/3.png\"/\u003e\u003cimg width=\"24%\" src=\"./docs/img/4.png\"/\u003e\n\n\u003cimg width=\"24%\" src=\"./docs/img/5.png\"/\u003e\u003cimg width=\"24%\" src=\"./docs/img/6.png\"/\u003e\u003cimg width=\"24%\" src=\"./docs/img/7.png\"/\u003e\u003cimg width=\"24%\" src=\"./docs/img/8.png\"/\u003e\n\n## 5️⃣ 开始开发你的应用程序\n\n**AirPower4T** 目前使用子目录的方式提供，你可以将 **AirPower4T** 源代码下载或克隆后命名为 **airpower** 添加到你的项目的 \n**src** 目录下，然后使用 **Vite** 构建你的项目。\n\n推荐你直接使用我们提供的 **WebStarter**\n模板来快速开启一个项目：via [Github](https://github.com/HammCn/AirPowerWebStarter/blob/main/README.md) / [Gitee](https://gitee.com/air-power/AirPowerWebStarter/blob/main/README.md)\n\n我们使用的是 `Vite` 构建, 包管理使用的是 `yarn`, 请先安装前叙的相关工具后继续接下来的操作 ：）\n\n### 5.1. 安装 **TypeScript**\n\n  ```shell\n  npm install -D typescript\n  ```\n\n### 5.2. Clone代码\n\n- 通过**Github**代码仓库初始化\n\n  ```shell\n  git clone https://github.com/HammCn/AirPowerWebStarter.git \u0026\u0026\n  cd AirPowerWebStarter/src \u0026\u0026 \n  git clone https://github.com/HammCn/AirPower4T.git airpower \u0026\u0026 cd ../ \u0026\u0026\n  yarn \u0026\u0026 cp .env.dev .env \u0026\u0026 yarn s\n  ```\n\n- 通过**Gitee**代码仓库初始化(推荐)\n\n  ```shell\n  git clone https://gitee.com/air-power/AirPowerWebStarter.git \u0026\u0026\n  cd AirPowerWebStarter/src \u0026\u0026 \n  git clone https://gitee.com/air-power/AirPower4T.git airpower \u0026\u0026 cd ../ \u0026\u0026\n  yarn \u0026\u0026 cp .env.dev .env \u0026\u0026 yarn s\n  ```\n\n### 5.3. 按需修改配置\n\n复制一份 .env.dev 文件，并修改里面的配置，然后重命名为 .env\n\n  ```conf\n  VITE_APP_NAME = \"开发环境\"\n  VITE_APP_API_URL = \"/api/\"\n  VITE_APP_STATIC_URL = \"/static/\"\n  ```\n\n如需跨域代理，可修改 `vite.config.mts`\n\n### 5.4. 启动项目\n\n```shell\n# 启动项目\nyarn s              #缩写指令\n```\n\n## 6️⃣ 启动和打包\n\n启动项目前，我们建议你关闭 `visual studio code` 的 `Vetur` 插件，避免 `vue2` 和 `vue3` 产生冲突。\n\n```shell\n# 打包项目\nyarn dev            #开发环境 使用.env.dev\nyarn test           #测试环境 使用.env.test\nyarn production     #生产环境 使用.env.production\n```\n\n## 7️⃣ 其他命令\n\n```shell\n#使用标准commit模板\nyarn c   \n\n#更新项目和AirPower\nyarn u   \n\n#查看Git格式化日志\nyarn l           \n```\n\n## 8️⃣ 推荐的VSCODE插件扩展\n\n- Vue - Official\n- ESLint\n- SCSS Formatter\n\n\u003e 如碰到其他兼容问题，建议在工作区禁用以上三个插件之外的其他插件，特别是 `Vetur`。\n\n## 9️⃣ 我们的建议\n\n我们提供的 **AirPower4T宿主仓库**\n里面提供了一些 `ESlint规则` `路由配置` `环境变量配置` `tsconfig` `vite.config`, 以及很多的 **demo**\n代码, 你可以进行参考。\n\n如果你有什么疑问或者问题，你也可以加入开发者交流QQ群(`555156313`)\n进行咨询，当然，我们更建议你发起 [Github issue](https://github.com/HammCn/AirPower4T/issues/new) / [Gitee issue](https://gitee.com/air-power/AirPower4T/issues/new)\n\n## 🔟 Enjoy it\n\n好了, 那么接下来你可以愉快的开发了, 如果你有什么建议或者意见, 可以在本仓库中提交你的 **issues**, 你可以为这个依赖库进行\n**添砖加瓦**!\n\n\u003e ☕️Java: 加瓦? 什么Java?\n\n## 服务中的企业/用户\n\n**AirPower4T** 正在为以下的公司/用户提供技术支持:\n\n- **杭州某财税网络科技有限公司**\n\n- **重庆某工业互联网科技有限公司**\n\n\u003e 如果你的公司/企业正在使用我们的服务，欢迎通过 `Issues` 提交，我们将在上面的列表中列出。\n\n---\n\n\u003cp align=\"center\"\u003e\nATTENTION: Contributor list is just for fun!!!\n\u003c/p\u003e\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAirPowerTeam%2FAirPower-Web","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FAirPowerTeam%2FAirPower-Web","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAirPowerTeam%2FAirPower-Web/lists"}