The back-end project skeleton, which separates the front-end and back-end views, is implemented based on Vue element admin


brief introduction

This projectskeleton-adminbe based onvue-element-adminThe front end and back end of the project are separated. Back end projectskeletonHyperf is a basic background skeleton system with user management, permission management, role management, menu management, permission verification and user authentication (JWT). So this projectskeleton-adminNeed to cooperateskeletonIt’s better to use it together.

Prelude preparation

You need to install it locallynodeandgit。 The technology stack of this project is based onES2015+vuevuexvue-routervue-cliaxiosandelement-uiAll request data is usedMock.jsIt is very helpful to use this project to simulate, understand and learn these knowledge in advance.


-Sign in/cancellation-jurisdiction-Permission addition-Permission deletion-Permission modification-Role authorization-role-Role addition-Role deletion-Role modification-User roles-user management -User add-User delete-User information modification-User password modification-menu-Menu addition-Menu delete-Menu modification-Role menu-Token login authentication-Multi environment Publishing- dev
  - sit
  - stage
  - prod

Function Preview


#Clone project
git clone

#Enter project directory
cd skeleton-admin

#Installation dependency
npm install

#It is recommended that you do not use cnpm to install dependencies directly. There will be all kinds of weird bugs. The problem of slow download speed of NPM can be solved by the following operations
npm install --registry=

#Edit back end interface address env.development  / base api

VUE_APP_BASE_API = 'http://localhost:9501/backend'

#Start the service
npm run dev

Browser accesslocalhost:9527

Initial account password

account: [email protected].COM: admin123


#Build test environment
npm run build:stage

#Building production environment
npm run build:prod


#Preview publishing environment effects
npm run preview

#Preview publishing environment effect + static resource analysis
npm run preview -- --report

#Code format checking
npm run lint

#Code format checking and automatic repair
npm run lint -- --fix

QQ communication: 1031212459

Blog: background skeleton system based on hyperf architecture

This work adoptsCC agreementReprint must indicate the author and the link of this article