AirPower4T is a Vue 3 + TypeScript + Element Plus + Vite admin development base library that applies Java-SpringBoot-style object-oriented design to frontend backend systems.
What is AirPower4T?
AirPower4T is an open-source development base library for building web admin systems, maintained by the AirPowerTeam on both GitHub and Gitee. It takes Vue 3 applications written in TypeScript and provides a layer of classes, decorators, hooks, and components that cover data model conversion, network requests, permission management, and common page components. The library runs on Vite for fast builds and ships with entity and service patterns inspired by Java Spring Boot JPA, so data is handled through model instances rather than raw JSON.
Key Features
- Object-oriented Model and Entity system — All data interactions use model instances instead of raw JSON, with a BeanCopy-like conversion mechanism for copying properties between objects.
- Service classes for network abstraction — Services encapsulate network requests, and inheritance lets you reuse common request logic across related APIs.
- Decorator-based configuration — Use decorators to define display text, data transformation rules, and component configuration, keeping related settings close to the model.
- Built-in Element Plus components — A set of admin-oriented components (tables, forms, feedback dialogs) built on top of Element Plus.
- Hooks for service integration — Prebuilt hooks for common patterns like list loading, detail viewing, and submitting forms.
- Large collection of enums — Many enums to represent common statuses, types, and metadata for backend systems.
- Security utilities — Built-in encryption/decryption and encoding/decoding helpers for data protection.
- Multi-platform branches — The same library is available for web, WeChat mini-programs, and uni-app, allowing shared code across targets.
Who is it for?
- Frontend developers building admin dashboards — They can use AirPower4T's models, services, and components to speed up CRUD-heavy management interfaces.
- Teams coming from Java Spring Boot — Developers familiar with entities, repositories, and dependency injection will feel at home with the class-based architecture.
- Full-stack teams shipping multi-platform apps — The wechat and uniapp branches let the same design principles and services be reused on Mini Programs and cross-platform apps.
- Teams that value type safety — TypeScript is first-class, so models and responses are strongly typed.
What can you do with AirPower4T?
- Scaffold a new admin project: Clone the SPMS-Web template (available on GitHub and Gitee), add AirPower4T as a local dependency, and get a working Vue 3 + Vite admin with built-in services and components.
- Model backend data as classes: Define entities with decorators and let AirPower4T handle serialization, validation, and display configuration when rendering tables and forms.
- Abstract API calls into services: Extend base service classes to get request/response handling, error handling, and permission checks without repeating code.
- Protect sensitive data: Use the included encryption/decoding helpers to encode or hash data before sending it to the server.
How does AirPower4T work?
AirPower4T is integrated by cloning the SPMS-Web starter template and placing AirPower4T into an airpower folder, then installing dependencies with yarn and copying the example environment file (.env.dev to .env). The project is started with yarn s for development, and built with yarn dev, yarn test, or yarn production to target different environment configurations. The library also recommends disabling the Vetur plugin in VS Code to avoid Vue 2/Vue 3 conflicts.
Alternatives
- vue-element-admin — a popular Vue 2 admin template with dynamic routing and i18n, but it does not focus on object-oriented service models.
FAQ
Is AirPower4T free to use?
The project is open-source and hosted on both GitHub and Gitee, and you can clone and modify the code freely.
What branches are available?
AirPower4T's repository contains separate branches for web, wechat, and uniapp, letting you use the same design patterns on web, WeChat Mini Programs, and uni-app based cross-platform applications.
How do I start a project with AirPower4T?
Clone the SPMS-Web template from GitHub or Gitee, clone AirPower4T into an airpower folder, run yarn to install dependencies, copy .env.dev to .env, then run yarn s to launch the development server.
Does AirPower4T work with Vue 2?
No. The library is built specifically for Vue 3, and the README recommends disabling the Vetur plugin because it is designed for Vue 2 and can conflict with Vue 3 projects.
