It is a magical vue admin based on the newest development stack of vue, built-in i18n solution, typical templates for enterprise applications, lots of awesome features. It helps you build a large complex Single-Page Applications. I believe whatever your needs are, this project will help you.
This project integrates a lot of features that you may not use, it will cause a lot of code redundancy. If your project does not pay attention to this issue, you can also directly develop it based on it. Otherwise, you can use vue-admin-template.
- Login / Logout - Permission Authentication - Page permission - Directive permission - Permission configuration page - Two-step login - Multi-environment build - dev sit stage prod - Global Features - I18n - Multiple dynamic themes - Dynamic sidebar (supports multi-level routing) - Dynamic breadcrumb - Tags-view (Tab page Support right-click operation) - Svg Sprite - Mock data - Screenfull - Responsive Sidebar - Editor - Rich Text Editor - Markdown Editor - JSON Editor - Excel - Export Excel - Upload Excel - Visualization Excel - Export zip - Table - Dynamic Table - Drag And Drop Table - Inline Edit Table - Error Page - 401 - 404 - Components - Avatar Upload - Back To Top - Drag Dialog - Drag Select - Drag Kanban - Drag List - SplitPane - Dropzone - Sticky - CountTo - Advanced Example - Error Log - Dashboard - Guide Page - ECharts - Clipboard - Markdown to html
You need to install node and git locally. The project is based on ES2015+, vue, vuex, vue-router, vue-cli , axios and element-ui, all request data is simulated using Mock.js. Understanding and learning this knowledge in advance will greatly help the use of this project.
At the same time supporting a series of tutorial articles, how to build a complete background project from zero, suggest that you read these articles and then come to practice this project. But there's no English version yet.
- 手摸手，带你用 vue 撸后台 系列一(基础篇)
- 手摸手，带你用 vue 撸后台 系列二(登录权限篇)
- 手摸手，带你用 vue 撸后台 系列三 (实战篇)
- 手摸手，带你用 vue 撸后台 系列四(vueAdmin 一个极简的后台基础模板)
- 手摸手，带你用 vue 撸后台 系列五(v4.0 新版本)
- 手摸手，带你封装一个 vue component
- 手摸手，带你优雅的使用 icon
- 手摸手，带你用合理的姿势使用 webpack4（上）
- 手摸手，带你用合理的姿势使用 webpack4（下）
This project does not support low-level browsers (such as ie). If you need to, please add polyfills yourself.
# Project Structure
This project has built the following templates, and have built a scaffold based on Vue, which should help you prototyping production-ready admin interfaces. It covers almost everything you need.
├── build # build config files ├── mock # mock data ├── plop-templates # basic template ├── public # pure static assets (directly copied) │ │── favicon.ico # favicon │ └── index.html # index.html template ├── src # main source code │ ├── api # api service │ ├── assets # module assets like fonts,images (processed by webpack) │ ├── components # global components │ ├── directive # global directive │ ├── filters # global filter │ ├── icons # svg icons │ ├── lang # i18n language │ ├── layout # global layout │ ├── router # router │ ├── store # store │ ├── styles # global css │ ├── utils # global utils │ ├── vendor # vendor │ ├── views # views │ ├── App.vue # main app component │ ├── main.js # app entry file │ └── permission.js # permission authentication ├── tests # tests ├── .env.xxx # env variable configuration ├── .eslintrc.js # eslint config ├── .babelrc # babel config ├── .travis.yml # automated CI configuration ├── vue.config.js # vue-cli config ├── postcss.config.js # postcss config └── package.json # package.json
# Getting Started
# clone the project git clone https://github.com/PanJiaChen/vue-element-admin.git # enter the project directory cd vue-element-admin # install dependency npm install # develop npm run dev
This will automatically open http://localhost:9527.
If you see the following page then you have succeeded.
We have built-in models, standard components, mock data, hot module reloading, state management, i18n, global router, etc. You can continue exploring other documents for more details on those topics.
Suggestion： You can use
vue-element-admin as a toolbox or as an integration solution repository, It is recommended to do secondary development on the basis of
vue-admin-template, if you need any additional feature, you can copy from
There may be some spelling or translation errors in the course of writing this document. It is welcome to point out by issue or pr. After all, English is not my mother tongue.
vue-element-admin is also continuing to iterate, summarize and summarize more features, and summarize the best practices of product templates/components/business scenarios in the middle and back office. This project is also very much looking forward to your participation and feedback.
If you think this project is useful, you can buy a glass of juice for the author ❤️ Donate
# Browsers Support
Modern browsers and Internet Explorer 10+.
IE / Edge
|IE10, IE11, Edge||last 2 versions||last 2 versions||last 2 versions|
# Vue Ecosystem
First understanding the things in these vue ecosystems will help you get started with this project.
Vue Router Vue Router is the official router for Vue.js. It deeply integrates with Vue.js core to make building Single Page Applications with Vue.js a breeze.
Vuex Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion.
Vue Loader Vue-loader is a loader for webpack that allows you to author Vue components in a format called Single-File Components (SFCs). The combination of webpack and vue-loader gives you a modern, flexible and extremely powerful front-end workflow for authoring Vue.js applications.
Vue Test Utils Vue Test Utils is the official unit testing utility library for Vue.js.
Vue Dev-Tools Browser devtools extension for debugging Vue.js applications.
Vue CLI Vue CLI is a full system for rapid Vue.js development. It aims to be the standard tooling baseline for the Vue ecosystem. It ensures the various build tools work smoothly together with sensible defaults so you can focus on writing your app instead of spending days wrangling with configurations.
Vetur Vue tooling for VS Code. Write vue essential plugins under VS Code.