5.6 KiB
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.3.3 is used in the project, so vue 2.3.0+ is required.
More tutorials incoming. Including articles on:
- How to build structure of a backend dashboard project from scratch
- How to make a complete user system (e.g. permission authentication, two-factor authentication)
- How to package components (e.g. rich text)
- How to integrate with Qiniu
- Other development experience on backend
Join the group on QQ 591724180.
Tutorials:
- Wiki
- Step by step instructions on playing with backend using Vue Part 1 - Fundamentals
- Step by step instructions on playing with backend using Vue Part 2 - Login permission
- Step by step instructions on packaging a Vue component
Please read the Wiki and articles above before creating any issue. Feel free to contribute by making a pull request.
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
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
│ ├── jquery
│ └── Tinymce // rich text
├── .babelrc // babel-loader config
├── eslintrc.js // eslint config
├── .gitignore // gitignore
├── favicon.ico // favicon
├── index.html // html template
└── package.json // package.json
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
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
