# vue-element-admin — Production-Ready Vue 2 Admin Dashboard Template

> A full-featured Vue 2 admin template with 50+ components, permission control, and i18n support built on Element UI.

## Install

Save as a script file and run:

# vue-element-admin — Production-Ready Vue 2 Admin Dashboard Template

## Quick Use
```bash
git clone https://github.com/PanJiaChen/vue-element-admin.git
cd vue-element-admin
npm install
npm run dev
```

## Introduction
vue-element-admin is a production-ready front-end management system template built on Vue 2 and Element UI. It provides a rich set of components, dynamic routing, permission control, and internationalization out of the box, making it the go-to starting point for enterprise admin panels.

## What vue-element-admin Does
- Provides 50+ reusable UI components for admin interfaces
- Implements role-based dynamic permission routing
- Includes mock server for rapid prototyping without a backend
- Offers multiple layout options (sidebar, top nav, mixed)
- Supports internationalization with hot-switchable locales

## Architecture Overview
The project follows a standard Vue CLI structure with Vuex for state management and Vue Router for navigation. Permission logic intercepts route changes, dynamically generating accessible menus based on user roles. API calls are abstracted through Axios with request/response interceptors for token refresh and error handling.

## Self-Hosting & Configuration
- Clone the repo and run `npm install` to set up dependencies
- Edit `.env.development` and `.env.production` for API base URLs
- Configure role permissions in `src/router` and `src/permission.js`
- Run `npm run build:prod` to generate static assets for deployment
- Serve via Nginx, Apache, or any static file host behind a CDN

## Key Features
- Dynamic sidebar navigation generated from route config
- Rich text editor, Markdown editor, and JSON editor built in
- Drag-and-drop table, inline editing, and Excel export
- Comprehensive error handling with 401/403/404 pages
- Theme customization with runtime color switching

## Comparison with Similar Tools
- **Ant Design Pro** — React-based, heavier enterprise conventions, larger ecosystem
- **vue-vben-admin** — Vue 3 + Vite, more modern but smaller community
- **react-admin** — Data-provider pattern, better for CRUD-heavy apps
- **AdminLTE** — jQuery-based, lighter but less structured
- **Naive UI Admin** — Newer Vue 3 option with TypeScript-first approach

## FAQ
**Q: Is vue-element-admin suitable for Vue 3 projects?**
A: No, it targets Vue 2 + Element UI. For Vue 3, consider vue-vben-admin or vue-pure-admin which use Vite and Element Plus or Naive UI.

**Q: Can I remove features I do not need?**
A: Yes. The companion project vue-admin-template provides a minimal starter with the same architecture but fewer built-in pages.

**Q: How does permission routing work?**
A: Roles are fetched after login, then matched against route meta fields to dynamically add only authorized routes to the router instance.

**Q: Does it support TypeScript?**
A: The main project uses JavaScript. Community forks and the Vue 3 successors offer TypeScript support.

## Sources
- https://github.com/PanJiaChen/vue-element-admin
- https://panjiachen.github.io/vue-element-admin-site/

---
Source: https://tokrepo.com/en/workflows/asset-a6190c5b
Author: Script Depot