analytics

Vue Element Admin

Name: Vue Element Admin
Author: PanJiaChen

:tada: A magical vue admin https://panjiachen.github.io/vue-element-admin

90,206 stars30,351 forksVueUpdated 10/24/2024100% free · open source

What it does

A ready‑to‑go Vue + Element‑UI admin dashboard template you can clone and run instantly to power internal tools or SaaS back‑ends.

Install / run

git clone https://github.com/PanJiaChen/vue-element-admin.git && cd vue-element-admin && npm install

When to use it

•You need a full‑featured admin UI (tables, charts, auth) and don’t want to build it from scratch.
•Your team works in Vue and wants a proven layout, router, and state‑management setup out of the box.
•You want a starter that already includes mock APIs, permission control, and responsive design.

Quick start

11️⃣ Open a terminal and run the command above to clone the repo and install dependencies.
22️⃣ Start the development server: `npm run dev` (this launches the mock API server on port 9528 and the UI on http://localhost:9527).
33️⃣ Open http://localhost:9527 in your browser – you should see the demo dashboard with login / username = admin, password = any.
44️⃣ To add a new page, run the built‑in generator: `npm run plop` and follow the prompts (choose “view”, give a name, and the tool creates router, view, and menu entries).
55️⃣ When you’re ready for production, build the static files with `npm run build:prod` and deploy the `dist` folder to any static‑file host.

Ready-to-paste prompt

npm run plop   # then select "view" → name "UserAnalytics" → choose "table" layout – the generator will create src/views/userAnalytics/index.vue and automatically register the route and sidebar menu.

Heads up: The project requires Node >= 8.0 and npm >= 5.0; using an older Node version will cause “Cannot find module ‘@babel/runtime’” errors. Also, the dev server expects port 9528 for the mock API – if that port is already in use, the UI will fail to load data.

Saves to your device

Topics

admin

admin-dashboard

admin-template

axios

dashboard

desktop

element

element-ui

i18n

management-system

mock

tinymce

vue

vue-admin

vue-cli

vuex

webpack

webpack4

xlsx

How Vue Element Admin works

Codeflow

Free to inspect

Vue Element Admin is a medium Vue project (~13k lines across 211 code files, plus 7 test files). Expect some technical setup — comfortable with a terminal, or ask a developer. Last commit 22 months ago, MIT license, has a test suite.

Size

Medium codebase

~13k lines · 211 code files · ~2 h to skim

Setup

Some technical setup

Comfortable with a terminal? 20–40 min. Otherwise ask a dev.

Runs on

Node.js

No API keys detected

Vue 69%JavaScript 26%SCSS 4%

Where to start reading