YoYoBoot Basic Module Vue

一个基于 Vue 3 的企业级组件库，提供丰富的UI组件和实用工具，集成了ABP框架支持，帮助开发者快速构建高质量的前端应用。

简介

@yoyoboot/basic-module-vue 是一套基于 Vue 3、TypeScript 和 Ant Design Vue 的组件库，专为企业级应用开发设计。它提供了丰富的自定义组件、服务和工具函数，可以帮助开发人员快速构建功能完善的前端应用。

特性

• 基于 Vue 3、TypeScript、Vite 和 Ant Design Vue 构建
• 提供多种企业级常用组件，如表格、表单、树形控件等
• 内置ABP框架集成，支持权限控制、认证等功能
• 完善的类型定义，提供良好的TypeScript支持
• 模块化设计，支持按需引入
• 提供灵活的布局组件和工具函数

安装

npm install @yoyoboot/basic-module-vue --save

或者使用 yarn:

yarn add @yoyoboot/basic-module-vue

使用

全局引入

import { createApp } from 'vue'
import App from './App.vue'
import YoYoBootBasic from '@yoyoboot/basic-module-vue'

const app = createApp(App)
app.use(YoYoBootBasic)
app.mount('#app')

按需引入

import { createApp } from 'vue'
import App from './App.vue'
import { YBtn, YSelect, AbpService } from '@yoyoboot/basic-module-vue'

const app = createApp(App)
app.component('y-btn', YBtn)
app.component('y-select', YSelect)
app.mount('#app')

主要组件

该库提供了多种实用组件，以下是部分主要组件：

• 基础组件

  • y-btn: 按钮组件，扩展了Ant Design的按钮
  • y-btn-group: 按钮组
  • y-collapse: 折叠面板
  • y-enum: 枚举组件

• 表单相关

  • y-select: 下拉选择组件，支持远程数据源
  • y-select-page: 带分页的选择组件
  • y-combox: 组合框
  • y-suffix-search: 带后缀的搜索框

• 数据展示

  • y-model-table: 模型表格，用于展示和操作数据
  • y-table-edit: 可编辑表格
  • y-tree-panel: 树形面板

• 布局组件

  • y-model-layout: 模型布局
  • y-resize-layout: 可调整大小的布局

• 功能组件

  • y-project-license: 项目许可证
  • y-set-license: 设置许可证
  • y-refresh-token-modal: 刷新令牌模态框

服务和工具

除了UI组件外，该库还提供了一系列服务和工具：

• ABP框架集成

  • AbpService: ABP服务
  • AppAuthService: 应用授权服务
  • AppSessionService: 会话服务
  • PermissionService: 权限服务

• 认证相关

  • LoginService: 登录服务
  • ImpersonationService: 用户模拟服务
  • LicenseService: 许可证服务
  • RefreshTokenService: 令牌刷新服务

• 工具函数

  • 国际化工具
  • 路由工具
  • 存储工具
  • 辅助函数

开发

环境要求

• Node.js >= 14
• npm >= 6

脚本命令

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build

# 预览生产构建
npm run preview

构建信息

该项目使用Vite和Rollup进行构建：

• 使用Vite作为开发服务器和主要构建工具
• 使用Rollup生成类型声明文件和ES模块
• 支持JSX/TSX
• 支持Less样式预处理

许可证

MIT

贡献

欢迎提交问题和功能请求，也欢迎提交PR。详情请参阅贡献指南。