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、包含图书管理示例的应用：

npm install -g @lsw-abpvue/cli
abpv new Acme.BookStore -d mongodb --sample-crud

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

构建 CRUD 页面

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

abpv proxy add --module app
abpv generate Book

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

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

文档

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

Document