gfast前端UI：基于Vue3与vue-next-admin适配手机、平板、pc 的后台开源模板

摘要

随着现代软件开发的高效化需求，一个能够快速适应不同设备、简化开发过程的前端模板变得至关重要。gfast前端UI，基于Vue3.x和vue-next-admin，致力于提供这样一个解决方案。本文将深入探讨gfast前端UI的技术栈、设计原则以及它如何适配手机、平板和PC，从而帮助开发者实现快速开发。

一、引言

在数字化时代，后台管理系统已成为企业和应用不可或缺的一部分。为满足市场对于快速开发、高效管理和良好用户体验的需求，gfast应运而生。作为一个基于Go Frame的后台管理系统，gfast不仅拥有完善的权限用户管理，还致力于提供一系列高效开发的工具和组件。本文重点介绍gfast的前端UI部分。

二、项目概览

基于 vue3.x + CompositionAPI + typescript + vite + element plus + vue-router-next + next.vuex，适配手机、平板、pc 的后台开源免费模板，希望减少工作量，帮助大家实现快速开发。

gfast前端UI的技术栈包括Vue3.x、CompositionAPI、TypeScript、Vite、Element Plus、Vue-Router-Next和Next.Vuex。这些技术的选择旨在确保前端UI的高效性、可维护性和可扩展性。

1. Vue3.x与CompositionAPI：Vue3.x引入了CompositionAPI，使得代码组织和逻辑复用更加灵活。

2. TypeScript：通过引入TypeScript，增强了代码的类型安全性，提高了开发效率。

3. Vite：采用Vite作为构建工具，利用其快速的热更新和启动速度，提高开发体验。

4. Element Plus：作为Vue3的官方UI组件库，Element Plus提供了丰富的组件和样式，简化了界面开发。

5. Vue-Router-Next：使用Vue-Router-Next进行路由管理，支持Vue3.x的路由功能。

6. Next.Vuex：采用Next.Vuex作为状态管理库，实现应用的状态管理。

特征

• 高生产率：几分钟即可搭建一个后台管理系统

• 模块化：单应用多系统的模式，将一个完整的应用拆分为多个系统，后续扩展更加便捷，增加代码复用性。

• 插件化：可通过插件的方式扩展系统功能

• 认证机制：采用gtoken的用户状态认证及casbin的权限认证

• 路由模式：得利于goframe2.0提供了规范化的路由注册方式,无需注解自动生成api文档

• 面向接口开发

内置功能

1. 用户管理：用户是系统操作者，该功能主要完成系统用户配置。

2. 部门管理：配置系统组织机构（公司、部门、小组），树结构展现支持数据权限。

3. 岗位管理：配置系统用户所属担任职务。

4. 菜单管理：配置系统菜单，操作权限，按钮权限标识等。

5. 角色管理：角色菜单权限分配、设置角色按机构进行数据范围权限划分。

6. 字典管理：对系统中经常使用的一些较为固定的数据进行维护。

7. 参数管理：对系统动态配置常用参数。

8. 操作日志：系统正常操作日志记录和查询；系统异常信息日志记录和查询。

9. 登录日志：系统登录日志记录查询包含登录异常。

10. 在线用户：当前系统中活跃用户状态监控。

11. 定时任务：在线（添加、修改、删除)任务调度包含执行结果日志。

12. 代码生成：前后端代码的生成。

13. 服务监控：监视当前系统CPU、内存、磁盘、堆栈等相关信息。

14. 在线构建器：拖动表单元素生成相应的HTML代码。

15. 文件上传,缓存标签等。

项目使用模块化与插件化的方式开发，目前正在升级的插件有：cms系统、万能模型、微信管理、工单系统、问答系统、工作流引擎...，同时也欢迎大家把写好的插件上传到商城，我们来帮您实现技术变现，获取收益！

GFast开源以来得到了大家的很多支持，如果您愿意为GFast贡献代码或提供建议，请加微信：qixun007(备注：gfast)

演示地址

http://v3.g-fast.cn/sys 账号：demo 密码：123456

配置

项目数据库文件 resource/data/db.sql 创建数据库导入后修改配置 manifest/config/config.yaml.bak 复制改为manifest/config/config.yaml

其中gfToken配置

gfToken:
  cacheKey: "gfToken_"   #缓存前缀
  timeOut: 10800         #token超时时间（秒）
  maxRefresh: 5400       #token自动刷新时间（秒）
  multiLogin: true       #是否允许一个账号多人同时登录
  encryptKey: "49c54195e750b04e74a8429b17896586"    #加密key (32位)
  cacheModel: "redis"    #存储引擎 （memory使用内存|redis使用redis）
  excludePaths:          #排除不做登录验证的路由地址
    - "/api/v1/system/login"

项目为前后端分离，前端地址：

github地址：https://github.com/tiger1103/gfast-ui

gitee地址：https://gitee.com/tiger1103/gfast-ui

文档地址

http://doc.g-fast.cn/docs/gfast32

相关视频

https://space.bilibili.com/254192571/channel/seriesdetail?sid=223204

演示图

感谢(排名不分先后)

gf框架 https://github.com/gogf/gf

vue-next-admin https://gitee.com/lyt-top/vue-next-admin

swaggo https://github.com/swaggo/swag

gtoken https://github.com/goflyfox/gtoken

casbin https://github.com/casbin/casbin

PHP开源工作流引擎tpflow https://gitee.com/ntdgg/tpflow

CCflow 国内最优秀的开源流程引擎 https://gitee.com/opencc/ccflow

安装 cnpm、yarn

• 复制代码(桌面 cmd 运行) npm install -g cnpm --registry=https://registry.npm.taobao.org

• 复制代码(桌面 cmd 运行) npm install -g yarn

⚡ 使用说明

建议使用 cnpm，因为 yarn 有时会报错。node 版本[v16.x ~ v20.x)

# 克隆项目
git clone -b v3.2 https://gitee.com/tiger1103/gfast-ui.git
# 进入项目
cd gfast-ui
# 安装依赖
npm install --registry=https://registry.npmmirror.com
# 运行项目
npm run dev
# 打包发布
npm run build

三、跨平台适配设计

gfast前端UI的设计原则之一是跨平台适配，即适配手机、平板和PC等不同设备。通过结合Element Plus的响应式布局和vue-next-admin的灵活配置，gfast前端UI能够自动调整界面布局和组件大小，确保在各种设备上都能提供良好的用户体验。

四、平台简介与未来展望

gfast是基于全新Go Frame 2.3+Vue3+Element Plus开发的全栈前后端分离的管理系统。前端采用vue-next-admin、Vue和Element UI，提供了丰富的功能和高效的开发体验。未来，gfast将继续迭代和扩展其功能，如流程审批、工作流引擎、项目管理等，以满足更多场景和需求。

五、总结

gfast前端UI基于Vue3.x和vue-next-admin的跨平台后台开源模板，为开发者提供了一个高效、易用的前端解决方案。通过整合一系列前端技术栈和跨平台适配设计，gfast前端UI旨在减少工作量、提高开发效率并提供良好的用户体验。随着技术的不断发展和需求的不断变化，我们期待gfast在未来能够持续进步，为开发者带来更多价值和便利。

项目下载地址：

https://gitee.com/tiger1103/gfast-ui