Skip to content

Element-Plus 前端插件

注意事项:

本插件必须要求BegCode的版本在8.1.10及以上。

更新日志:

版本:8.1.12 日期:2024-03-15,解决组件类型声明和几个小bug。

1. 什么是便携插件

BegCode便携插件基于JHipster的本地蓝图(LocalBlueprint)实现,主要目标是方便发布、下载与使用。

2. 使用便携插件

便携插件的使用比较简单,三步走策略,即下载、安装和使用。

2.1 下载便携插件

BegCode会在插件中心提供插件的说明,其中包含下载地址,直接使用该下载地址将得到一个zip压缩文件。 如element-8.1.12.zip文件,这是基于Element Plus的前端支持插件。

2.2 插件的安装

基于便携目标,BegCode插件不需要安装,但下载zip文件后,要注意其保存的目录和格式。

基本要求为:便携插件全部保存在项目目录下的.portableBlueprints文件夹内。

下图为某项目下使用Element-Plus插件的最终目录结构: element-folder.png

其中.portableBlueprintselement.blueprintelement三个目录的名称及关系都是固定的,一定要检查是否正确。

使用便携插件创建项目的基本步骤为:

1.创建项目目录

2.创建便携插件目录.portableBlueprints

3.下载便携插件,解压为后保存到.portableBlueprints目录下。

4.检查.portableBlueprints下目录是否正确。

5.项目目录下运行begcode命令。

2.3 插件的使用

正确保存便携插件到项目的相关目录后,插件即可正常使用,但前提是系统必须已经安装了BegCode。

这时在项目目录下运行begcode命令后,会自动加载相应的便携插件,无需特别的设置。

对于示例中使用的element-plus插件,运行后会看到如下选项,表示element-plus插件已经正常加载并可用。 element-ui-select.png

3. Element-Plus插件说明

3.1 基础功能

Element Plus前端主要基于element-plus-admin前端项目,提供了用户、角色、菜单、文件上传、数据字典等BegCode基础版内置的功能。

提供了丰富的组件。

3.2 下载地址

BegCode及插件的维护需要投入大量的时间和精力,如果他对您有价值,希望得到您的捐助,以支持继续前行和不断完善!

donate.jpg

请结合自身情况选择下载地址:

3.3 效果预览

这里展示了部分功能的页面截图,具体源码可到github查看。https://github.com/begcode/monolith-mybatis-element

3.3.1 首页

index.png

3.3.2 用户管理

user.png

3.3.3 菜单管理

view_permission.png

3.3.4 文件上传

upload-file.png

3.3.5 图片上传

upload-image.png

3.3.6 数据字典

dictionary.png

3.3.7 通知公告

announcement.png

3.3.8 系统日志

sys-log.png

3.3.9 Api接口文档

api.png

3.3.10 关于

about.png

4. 总结

Element Plus便携插件是BegCode第一个插件,主要功能在于实现前端Element Plus组件库的支持,主要基于element-plus-admin开源仓库实现。

后续将不断完善功能Element Plus前端功能,同时也计划推出更多的前端组件方案,以满足大家的不同前端技术栈要求。