为了减少维护成本,我们把AirPower4T拆成了一个个NPM包

看过我们之前一些文章的朋友可能记得，我们之前开源了一个 AirPower4T 的前端开发脚手架，一个基于 Vue3 TypeScript Element Plus Vite 的开发基础库，使用面向对象、装饰器、Hooks等开发模式，内置了数据模型转换、表格表单装饰器配置、加解密和编码解码、网络请求、权限管理等常见后台功能以及页面组件。

本来用着挺舒服的还，后来发现耦合的地方很多，维护成本越来越高了。

后来也有很多朋友说初始化项目都费劲，而且需要使用我们的宿主项目，很不习惯。

开始拆家

于是我们动手了，拆！

如果你不想看我们怎么拆的，那可以直接拉到最后看我们如何使用。

AirPower - 工具包

我们先把一些和终端平台都无关的部分，例如数据转换、装饰器、时间日期处理、加解密与散列、文件处理、常用枚举和字典、常见数据结构处理等，抽离到了一个独立的工具包里： Github / NPM

我们在这个包里提供了一些常用的装饰器，这些装饰器都与平台、框架等无关。

那么现在就可以使用这个包在任何的框架和平台中使用了：

npm install airpower
// or
yarn add airpower
// or
pnpm add airpower
...

@airpower/core - 核心包

接下来，我们把常用的 CURD 部分做了抽象，提到了一个核心包里： Github / NPM

而这个核心包只处理了 CURD 封装以及网络请求的数据处理部分，但不涉及 如何请求 错误信息显示等

我们使用了抽象类和抽象方法，把这部分和平台、框架特性部分不一致的抽象掉了，交给下一层来自行实现。

也就是，这一层并不关心你使用 axios 还是 fetch 还是 uni.request 还是 wx.request...

这一层也不关心你使用 Element Plus 还是 Ant Design Vue 还是 Vuetify 还是 MUI...

@airpower/web - Web 端

这个端目前是我们还在开发中的包： Github / NPM

这一层主要负责真实的网络请求发起，当然，这个端我们使用的是 axios。

也提供了很多的 Hooks 来处理一些常见的业务逻辑，比如 表格、表格树、表单等。

我们使用了 Element Plus 来做页面组件，当然，你也可以换成其他框架，只要实现 @airpower/core 里的抽象方法即可。

这个包里我们提供了一些更多的装饰器：

• @Table: 配置是表格列的的装饰器
• @Form: 配置表单属性的装饰器
• ... 等等（欢迎你来提建议）

虽然目前这些装饰器不会在其他端用到，但如果可能会是通用的需求，我们就考虑继续上浮到 @airpower/core 里。

npm install @airpower/web
// or
yarn add @airpower/web
// or
pnpm add @airpower/web
...

这个包还在开发中，如果有兴趣，欢迎私信我一起玩。

@airpower/xxx

这是其他端的计划，比如 uniapp wechat taro electron nodejs 等等。

如何使用

我们目前的 @airpower/web 包虽然还在开发中，但今天可以来演示一下开发的舒适了：

初始化项目

你可以使用 vite 初始化一个全新的 Vue3 + TypeScript 项目，然后改动下面几个配置：

Vite配置

配置 vite.config.ts 先使用我们的后端 API 来测试。

export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      '/api': {
        target: 'https://demo.spms.work/api/',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

配置TypeScript装饰器

修改配置 tsconfig.app.json 以允许我们的装饰器运行：

{
  "compilerOptions": {
    /* 允许装饰器 */
    "experimentalDecorators": true,
  },
}

安装依赖并初始化项目

我们需要安装几个固定的依赖：

yarn add vue element-plus axios
yarn add @airpower/web

示例一个表格开发

我们先来演示一下如何使用我们的 @airpower/web 包来开发一个表格：

声明表格实体类

首先我们假设做的是用户表格，我们先声明一个实体类：

import { AirEntity, Field, Table } from "@airpower/web"

export class UserEntity extends AirEntity {
  @Table()
  @Field({
    label: "邮箱"
  })
  email!: string

  @Field({
    label: "昵称"
  })
  @Table()
  nickname!: string
}

我们同时标记了一些属性是表格字段。

实现服务类

接下来是实现用户的 API 接口服务类，当然，因为有 @airpower/core 包，所以我们可以复用其中的一些功能，比如 CRUD 的封装，以及 axios 的请求封装。

import { AbstractWebService } from "@airpower/web"
import { UserEntity } from "./UserEntity"

export class UserService extends AbstractWebService<UserEntity> {
  entityClass = UserEntity
  baseUrl = "user"
}

看，增删改查就全有了。

实现表格页面

表格就更简单了，这里直接使用 @airpower/web 里的 WebTable 组件以及提供的一些表格的 Hooks

<script setup lang="ts">
import { UserEntity } from "./model/UserEntity"
import { UserService } from "./model/UserService"
import { useTable, WebTable } from "@airpower/web"

const { response} = useTable(UserEntity,UserService)
</script>

<template>
  <div class="table">
    <WebTable :data="response.list" :clazz="UserEntity"></WebTable>
  </div>
</template>

<style scoped></style>

看，这就正常显示一个表格并显示了数据了。

搞定

当然，这个包我们还在开发过程中，目前也仅仅只实现了很少的部分，如果有兴趣加入一起开源，可以评论区或者私信找我。

计划

目前，我们的计划是：

1. Web 端

继续开发 @airpower/web 包，首先是将 AirPower4T 的大部分功能实现，然后考虑是否有一些来自用户的需求。

2. Uniapp 端

开发 @airpower/uniapp 包，这个包主要是为了适配 uniapp 的一些特殊需求，使用移动端合适的一些 UI库 和交互方式。

3. 其他端

再说吧。

完结

今天就到这啦，如果你有兴趣来参与我们的开源，可以关注这几个仓库：

• AirPower 工具包
• AirPower-Core 核心包
• AirPower-Web 网页包
• AirPower4T 老包
• AirPower4J 后端Java包

Bye.