Get the App
SLTechnology News&Howtos  ›  Internet Technology  › 

How to realize Front and back end Separation based on vue-element-admin

Shulou Source: shulou.com Published: 2022-06-01 22:27:16 10月04日 Update

This article introduces the relevant knowledge of "how to achieve front-end separation based on vue-element-admin". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Brief introduction

This project skeleton-admin is based on vue-element-admin 's front-end and front-end separate back-end projects. The back-end project skeleton is a basic background skeleton system done by hyperf with user management, rights management, role management, menu management, rights verification, and user authentication (jwt). Therefore, this project skeleton-admin needs to be used together with skeleton to be more appropriate.

Pre-order preparation

You need to install node and git locally. The technical stack of this project is based on ES2015+, vue, vuex, vue-router, vue-cli, axios and element-ui. All the request data are simulated by Mock.js. Knowing and learning these knowledge in advance will be of great help to the use of this project.

Features-login / logout-permissions add-permission deletion-permission modification-role authorization-role add-role deletion-role modification-user role-user management-user deletion-user information modification-user password modification-menu- Menu add-menu deletion-menu modification-role menu-token login authentication-Multi-environment publishing-dev-sit-stage-prod feature preview

Development # Clone project git clone https://github.com/anziguoer/skeleton-admin.git# enters the project directory cd skeleton-admin# installation depends on npm install# it is recommended not to use cnpm installation dependency directly, there will be all kinds of weird bug. The slow download speed of npm can be solved by doing the following: npm install-- registry= https://registry.npm.taobao.org# edits the backend interface address: .env.development / base apiVUE_APP_BASE_API = 'http://localhost:9501/backend'# startup service npm run dev

Browsers access http://localhost:9527

Initial account password account: admin@admin.com password: admin123 release # build test environment npm run build:stage# build production environment npm run build:prod other # Preview release environment effect npm run preview# Preview release environment effect + static resource analysis npm run preview-report# code format check npm run lint# code format check and automatic repair npm run lint-fix This is the end of the introduction to "how to achieve front-end separation based on vue-element-admin". Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Tags: Users roles projects permissions menus environment administration passwords knowledge code content functions effects more formats accounts learning inspection login authentication Apple Docker Huawei Linux macOS MariaDB Microsoft MySQL NVidia OPPO Reno Docker Linux NVidia OPPO Reno MariaDB