简介

这是基于 Vue3, element-plus, vue-admin-template 的配置化后台构建工具, 核心概念是配置化渲染, 页面根据后端下发的 PageSchema 自动渲染, 辅助可视化PageSchema构造工具, 使常见的后台页面可以无代码实现.

工具用的好, 下班回家早

目标

打造一套完整的低代码后台构建工具集, 包含前端和后端的完整链路, 通过可视化搭建, 即可实现常见的后台功能.

体验站点 | 详细文档(doing)

也可本地启动示例项目

git clone https://github.com/daodao97/rock-admin.git
cd rock-admin/exmaple
yarn
yarn serve

生态项目

• Golang + RockAdmin go-rock-amdin

• PHP(hyperf) + RockAdmin hyperf-admin

快速上手

使用本项目提供的模板快速创建本地项目

vue create --preset daodao97/rock-admin my-admin
cd my-admin
yarn serve

此时即可得到一个完整功能的后台了, 日常开发中, 我们只需要对借助搭建工具, 编辑 PageSchema 即可.

运行机制

启动配置项

默认配置可见 src/options

{
  ElementPlus: {
    size: 'small',
    zIndex: 3000,
    locale: locale
  },
  nav: [],
  routes: [],
  globalComps: [],
  mock: { enable: false, apis: [], baseURI: '', defaultMockApi: true },
  use: [],
  config: {
    title: 'RockAdmin',
    fixedHeader: false,
    sidebarLogo: true,
    logo: 'https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png',
    closeNavNotice: false,
    navBarNotice: '顶部消息提示',
    hasNewMessage: true,
    showPageJsonSchema: true,
    loginTips: '登录信息提示',
    sso: [],
    axios: {
      baseURL: '/api'
    }
  }
}

• ElementPlus 为 element-plus 默认配置, 文档
• nav 为 页面顶部导航按钮,
• routes 为 本地 vue-router 路由
• globalComps 为 注册到全局的组件
• mock 为 api 模拟数据配置
  • enable 是否启用 mock
  • apis 需要注入的本地模拟接口
  • defaultMockApi 是否启动底层的模拟接口
• use 底层为 app.use
• config 为站点配置
  • title 站点名称
  • fixedHeader 顶部导航栏装态
  • sidebarLogo 是否显示logo
  • logo 项目 logo图片地址
  • navBarNotice 项目打开的消息提示
  • showPageJsonSchema 是否显示页面的配置
  • loginTips 登录页面提交表单的提示文字
  • sso 企业微信和钉钉的登录配置
  • axios

项目地址 github.com/daodao97/ro…

本人为后端开发, 此项目是在实际工作中总结的一些实践, 前端水平一般, 各位前端大佬有兴趣了还望指导一二