Introduction to the

This is based on Vue3, elemen-Plus, VUE-admin-Template configuration background construction tool, the core concept is configuration rendering, page automatically render according to the backend of PageSchema, auxiliary visual PageSchema construction tool, Make common background pages can be achieved without code.

Good tools, early home from work

The target

Build a complete set of low code background building tools, including front-end and back-end complete links, through visual construction, can achieve common background functions.

Experience site | detailed documentation (doing)

You can also launch the sample project locally

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

The ecological project

  • Golang + RockAdmin go-rock-amdin

  • PHP(hyperf) + RockAdmin hyperf-admin

Quick learning

Use the templates provided with this project to quickly create a local project

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

Now you can get a complete function of the background, daily development, we just need to build tools, edit PageSchema.

Operation mechanism

Boot configuration item

The default configuration shows 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: 'Top message tip'.hasNewMessage: true.showPageJsonSchema: true.loginTips: 'Login info prompt'.sso: [].axios: {
      baseURL: '/api'}}}Copy the code
  • ElementPlus 为 element-plusDefault configuration,The document
  • navIs the navigation button at the top of the page,
  • routesFor the localvue-routerrouting
  • globalCompsFor components registered globally
  • mock 为 apiAnalog data configuration
    • enableWhether to enablemock
    • apisThe local emulation interface that needs to be injected
    • defaultMockApiWhether to start the underlying analog interface
  • useThe bottom ofapp.use
  • configConfiguring the site
    • titleThe site name
    • fixedHeaderThe top navigation bar is configured
    • sidebarLogoWhether to display the logo?
    • logoProject logo picture address
    • navBarNoticeProject open message prompt
    • showPageJsonSchemaWhether to display the page configuration
    • loginTipsPrompt text for submitting the form on the login page
    • ssoLogin configuration for enterprise wechat and Dingding
    • axios

Project address github.com/daodao97/ro…

I am back-end development, this project is summed up in the actual work of some practices, front-end level is general, you are interested in the front-end leaders also hope to guide one or two