Skip to content

Latest commit

 

History

History
177 lines (126 loc) · 5.86 KB

README-en.md

File metadata and controls

177 lines (126 loc) · 5.86 KB
Raw

vue element-ui license GitHub release

Intro

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

Note: element-ui@1.4.2 is used in the project, so vue 2.3.0+ is required.

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
  • Export Excel
  • Upload Excel
  • Export Zip
  • 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
  • clipboard

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.

Donate

If you find this project useful, you can buy me a cup of coffee donate

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

More

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

License

MIT