vue-element-admin

In the past half year, I have been building a backend for management dashboard using Vue. Though the backend has contained greater than 70 pages and over 10 permissions, it still takes insignificant effort to maintain the project. So I decide to make it open source so as to share my development experience and progress on backend. The tech stack is mainly Vue.js+Element+axios. Since it's a personal project, all data requests are simulated with Mock.js. Note: if anyone wants to modify or develop based on this project, please remove the mock files.

Live Demo

http://panjiachen.github.io/vue-element-admin

Features

  • Login/Logout
  • Permission authentication
  • Sidebar
  • Breadcrumb
  • Rich text editor
  • Markdown editor
  • JSON editor
  • Drag & drop list
  • SplitPane
  • Dropzone
  • Sticky
  • CountTo
  • ECharts
  • 401, 404 error page
  • Error log
  • Exporting to Excel
  • Table example
  • Interactive table example
  • Drag & drop table example
  • Form example
  • Multi-environments distribution
  • Dashboard
  • Two-factor authentication
  • Collapsing sidebar (support nested routes)
  • Mock data
  • cache tabs example
  • screenfull
  • markdown2html
  • views-tab

Development

# Clone project
git clone https://github.com/PanJiaChen/vue-element-admin.git

# Install dependencies
npm install

# Or (not recommended for cnpm due to unknown bugs, use taobao mirror instead)
npm install --registry=https://registry.npm.taobao.org

# Run local dev server
npm run dev

Visit in browser: http://localhost:9527

Distribution

# Build staged environment with webpack-bundle-analyzer
npm run build:sit-preview

# Build production environment
npm run build:prod

Directory structure

├── build                      // build 
├── config                     // config
├── src                        // source code
│   ├── api                    // all requests
│   ├── assets                 // static resource like themes, fonts
│   ├── components             // global public components
│   ├── directive              // global directive
│   ├── filters                // global filters
│   ├── mock                   // mock data
│   ├── router                 // router
│   ├── store                  // global status management
│   ├── styles                 // global styles
│   ├── utils                  // global public functions
│   ├── view                   // view
│   ├── App.vue                // entry view
│   └── main.js                // entry for loading components, initialization
├── static                     // third-party libraries not packed with Webpack
│   └── Tinymce                // rich text
├── .babelrc                   // babel-loader config
├── eslintrc.js                // eslint config
├── .gitignore                 // gitignore
├── favicon.ico                // favicon
├── index.html                 // html template
└── package.json               // package.json

Changelog

Detailed changes for each release are documented in the release notes.

State Management

Only status of user and app configuration is managed by Vuex. Other data are managed by their own business pages.

Demo

Two-factor authentication, supporting WeChat and QQ

Realtime switching themes

tabs

tabs

Collapsing sidebar

Drag & drop table

Interactive table

Uploading cropped avatar

Error log

Rich text (integrated with Qiniu, watermark and customization)

Packaging table component

Charts

Exporting to Excel

GitHub