ABP x Vue:介绍 ABP Vue UI

Lsw.Abp.VueUI 是一个由社区开发、基于 Vue 3 的完整 ABP Framework 前端实现。它遵循 ABP 的模块化架构,将框架服务、模块界面、扩展点和主题整合在一起,让你可以使用 Vue 构建 ABP 应用。

身份认证、权限、多租户、本地化和模块开发,都提供与 ABP Angular UI 保持一致的开发体验。实现采用 Vue Composition API、Vue Router 和单文件组件,让你在沿用熟悉的 ABP 开发约定的同时,使用 Vue 的工具和开发方式。

功能与扩展

项目内置账户、用户、角色、权限、租户、功能管理和设置管理等模块,提供 ABP 应用常用的管理页面,让你可以更专注于自己的业务功能。

模块页面支持扩展。你可以通过应用配置添加表格列、表单字段、行操作和工具栏按钮。例如,在用户列表中添加一个自定义操作,无需修改模块包的代码。

UI 采用支持多主题的设计。Basic Theme 提供浅色、深色和跟随系统三种模式。你也可以开发自定义主题,或者替换单个控件,无需重新编写模块页面。

下面演示了 BookStore 示例应用切换浅色与深色模式,以及切换界面语言:

快速开始

abpv CLI 可以创建包含 Vue 前端的新 ABP 应用,也可以为现有解决方案添加 Vue 前端。

安装 ABP CLI 后,执行以下命令即可创建一个使用 MongoDB、包含图书管理示例的应用:

bash 复制代码
npm install -g @lsw-abpvue/cli
abpv new Acme.BookStore -d mongodb --sample-crud

生成的解决方案中,aspnet-core/ 是 ABP 后端,vue/ 是 Vue 前端。

构建 CRUD 页面

启动后端后,在前端目录中执行以下命令,生成带有类型定义的 API 代理,再生成图书的 CRUD 页面:

bash 复制代码
abpv proxy add --module app
abpv generate Book

生成的页面包含表格、新建和编辑表单、CRUD 方法,以及对应的路由和菜单配置。页面就是项目中的 Vue 单文件组件,你可以继续修改表格列、调整表单,并添加自己的业务逻辑。

下面演示了在 BookStore 示例应用中创建图书并修改价格:

文档

Lsw.Abp.VueUI 基于 MIT 协议开源。安装说明、模块指南和自定义示例请参阅:

Document

相关推荐
AI源码18 小时前
高校查分系统
vue
北城笑笑3 天前
Vue 109 ,从零搭建 Vue3 + Electron 工程:生态、安全桥接与打包选型( Vue + Electron )
前端·javascript·vue.js·安全·electron·vue
上海懒图科技5 天前
工厂厂区电子地图定位导航:厂区人车精准定位,安全合规双保障
前端·arcgis·vue
卋罖7508 天前
Razor 视图 + JavaScript + Vue/iView 组件实现的表格自定义列
javascript·vue·iview·razor视图
无所谓^_^11 天前
个人健康管理系统 | Springboot3 | Vue3
java·vue·毕业设计·springboot·课程设计·毕设·前后端分离
在努力的前端小白11 天前
基于FastAPI+LangChain+LangGraph+Agent+多模态的AI Agent 有渔渔具网站
人工智能·langchain·vue·fastapi
sun_weitao12 天前
用 FastAPI + MQTT 做一个 ESP32最小化跑通示例
中间件·vue·fastapi
汤米粥16 天前
2026年主流前端技术框架
vue·react·elementplus·tailwind css·angular‌·svelte‌·bootstrap‌
codigger16 天前
Vue nextTick 到底在等什么?一篇讲透原理与那些年踩过的坑
程序员·vue·编程·异步更新·#人工智能
咚咚咚小柒17 天前
【前端】LangChain.js学习
前端·javascript·人工智能·typescript·langchain·vue·ai编程