nx admin

👍 A magical 🐮 ⚔ vue admin,记得star


vue element-ui Build Status license GitHub release

💎 Vue Automated management system

English | 简体中文


nx-admin is a front-end management background integration solution. It based on vue and use the UI Toolkit element.

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.Help individuals and businesses to the greatest extent, saving time and money.


Full edition

Github entrepot |
Gitee entrepot |



Github entrepot |
Gitee entrepot |


You need to install node and git locally. The project is based on ES2015+, vue, vuex, vue-router, 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.

related documents




Vue国际化处理 vue-i18n 以及项目自动切换中英文

搭建 Vue2 单元测试环境(karma+mocha+webpack3)




This project borrows from the pattern of the flower vents vueAdmin-template

This project does not support low version browsers (e.g. IE). Please add polyfill yourself if you need them.

Note: This project uses [email protected]+ version, so the minimum compatible [email protected]+


git:git clone https://github.com/mgbq/nx-admin.git

npm:npm install

Preview nx-admin

test account:

1. username: admin
   password: any
2. username: editor
   password: any

nx-admin project

nx-admin Is a completely open source free management system integration solution,By nxmin driven by interest after the work finished, if you also like the front-end development, welcome to join our discussion/study groups, in the same group can answer questions, share learning materials or just bullshit


群号 493671066 欢迎大家


other matters needing attention

一、If I don’t want to use some of the above components, how can I remove them from the template without affecting other functionality?

For example, I don’t want to use the vue-quill-editor component, so I need to take three steps

Step 1: delete the routing of this component, find the route to introduce the reorganization in the directory SRC /router/index.js, and delete the following code

        path: 'VueEditor',
        name: 'VueEditor',
        component: () => import('@/views/form/VueEditor'),
        meta: { title: 'VueEditor' }

Step 2: delete the file that introduced the component. Delete the vueediter.vue file in the directory SRC /view/form/.

Step 3: uninstall the component. Execute the following command:

npm un vue-quill-editor -S



- Login / Logout

- Permission Authentication
  - Page permission
  - Directive permission

- Multi-environment build
  - dev sit stage prod
- Global Features
  - Lock screen
  - Query
  - Go to github
  - 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

- Excel
  - Export Excel
  - Export zip
  - Upload Excel
  - Visualization Excel

- Table
  - Tree Table
  - Inline Edit Table

- Error Page
  - 401
  - 404

- Components
  - Back To Top
  - Drag Dialog
  - Drag Kanban
  - Drag List
  - SplitPane
  - Dropzone
  - Sticky
  - CountTo

- Dashboard
- V-charts
- Animation
- Clipboard
- Markdown to html
- Fontawesome
- Vuex Local persistent storage ,packaging H5 of SessionStorage and LocalStorage
- Right click menu
- Github-emoji
- Third party website
- Dynamic text description

You are welcome to contribute to the development of nx-admin (code writing/document translation)。

Getting started

# clone the project
git clone https://github.com/mgbq/nx-admin.git

# install dependency
npm install

# develop
npm run dev

This will automatically open http://localhost:9528.


# build for test environment
npm run build:sit

# build for production environment
npm run build:prod


# --report to build with bundle size analytics
npm run build:prod --report

# --preview to start a server in local to preview
npm run build:prod --preview

# lint code
npm run lint

# auto fix
npm run lint -- --fix

Donate Buy me a coffee ~



Copyright © 2018-present nxmin