Online address

preface

In the past six months, I have been writing the management background with VUE. At present, the background has more than 70 pages and more than ten permissions, but the maintenance cost is still very low and the efficiency is still very high. Therefore, I plan to share the experience and achievements of background development with open source. The current technology stack mainly adopts Vue + Element + AXIos. Since it is a personal project, the data request is replaced by MockJS.

The follow-up will be a series of tutorials supporting articles, such as how to build a background project framework from scratch, how to do a complete user system (such as permission verification, second login, etc.), how to secondary development components (such as rich text), how to integrate seven cows and other articles, a variety of background development experience and so on. Don’t worry ~ ~

function

  • Login/Logout
  • Permission to verify
  • The sidebar
  • Bread crumbs
  • Rich text editor
  • Markdown editor
  • JSON editor
  • The list of drag and drop
  • plitPane
  • Dropzone
  • Sticky
  • CountTo
  • Echarts chart
  • 401,401 error page
  • The error log
  • Export excel
  • table example
  • form example
  • Multi-environment publishing
  • dashboard
  • The secondary logon
  • Dynamic sidebar
  • The mock data

The development of

# # cloning project git clone https://github.com/PanJiaChen/vue-element-admin.git installation depend on NPM install # local development open service NPM run buildCopy the code

Browser visit http://localhost:9527

release

NPM Run Build :sit-preview # Build build environment NPM Run build:prodCopy the code

The directory structure

│ ├─ build │ ├─ config │ ├─ SRC // Source │ ├─ API │ ├─ assets │ ├─ Components │ ├─ Directive // │ ├─ Light Flag // Light Flag // Light Flag // Light Flag // Light Flag // Light Flag // Light Flag // Light Flag // Light Flag // Light Flag // ├─ ├─ exercises, ├─ exercises, ├─ exercises, ├─ exercises, exercises, exercises, exercises, exercises, exercises, exercises, exercises, exercises Initialization of ├ ─ ─ the static / / the third party is not packaged resources │ ├ ─ ─ jquery │ └ ─ ─ Tinymce / / rich text ├ ─ ─ the babelrc / / Babel - loader configuration ├ ─ ─ eslintrc. Js / / eslint ├─ ├─ ├─ └.html // HTML Template package.json // package.json // git / ├─ favicon.ico // favicon Icon ├─ index.html // HTML template Package. jsonCopy the code

State management

In the background, only user and APP configuration related states exist globally using VUEX, and other data are managed by each business page.

rendering

Two-step verification login supports wechat and QQ

Real dynamic peels



The sidebar can be folded up

Drag and drop the sorting

Upload cropped profile picture

Error statistics

Rich text (integration of seven Cattle watermarking and other personalized functions)

Encapsulating table components

The chart

Export excel

Wait a lot, please look forward to!