Skip to content
Get packs

Guide · Open source

How to use vue-element-admin: install, run and build

Updated · written with AI from the project's own documentation and checked against our catalogue data

vue-element-admin is an open-source starter codebase for admin interfaces, the back-office pages where you manage data, users and settings. It is built with Vue and element-ui and ships with sample pages for login, tables, charts and editors. This guide shows you how to clone it, run it locally, build it for production and decide whether it fits your project.

vue-element-adminPanJiaChen/vue-element-admin · ★ 90.1k · MIT

Quick start

  1. 1Clone the repository. Run git clone on the PanJiaChen/vue-element-admin repository and move into the vue-element-admin folder.
  2. 2Install dependencies. Run npm install inside the project folder to download the packages the project needs.
  3. 3Start the development server. Run npm run dev. The README says this opens http://localhost:9527 in your browser.
  4. 4Explore the sample pages. Log in and check the sample pages for tables, editors, charts and permissions to see what you can reuse.
  5. 5Replace the mock data. Swap the Mock.js responses for calls to your own API, one page at a time.
  6. 6Build for production. Run npm run build:prod, then npm run preview to check the release build locally.

What vue-element-admin includes

The README lists a broad set of features. The ones most relevant to an admin site are login and logout, page and directive permission, a permission configuration page, a dynamic sidebar that supports multi-level routing, and a dynamic breadcrumb.

It also includes sample pages for tables, editors and Excel handling, plus error pages for 401 and 404. Request data is simulated with Mock.js, so the sample pages work without a backend.

  • Login / Logout, with two-step login listed under permission authentication
  • Page permission and directive permission
  • Dynamic table, drag and drop table and inline edit table
  • Rich Text, Markdown and JSON editors
  • Export and upload Excel
  • Mock data for simulated requests
  • I18n and multiple dynamic themes

Check the prerequisites before you start

You need Node.js and git installed locally. The README links to both projects but does not state which Node.js version to use, so check the Node.js site and your team's standard before installing.

The README says the project is based on ES2015+, Vue, Vuex, vue-router, vue-cli, axios and element-ui. Learning these in advance will help you read and change the code.

  • Node.js (exact version not stated in the README)
  • git

Install and run vue-element-admin locally

Clone the repository, move into the project folder, install the dependencies and start the development server. The README says this opens http://localhost:9527 automatically.

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

Build the project for test or production

When you are ready to deploy, create a build. The README lists a test environment build and a production build. To check the release build locally, use the preview command. The README also lists lint commands for code format checks.

  • npm run build:stage builds for the test environment
  • npm run build:prod builds for the production environment
  • npm run preview previews the release build
npm run build:stage npm run build:prod npm run preview npm run lint

Adapt the sample pages for your own admin site

Most teams start by replacing the sample data and pages with their own. Because requests are simulated with Mock.js, you can swap those mocks for calls to your real API. The README's documentation site has a deployment guide for putting the built project online.

The project is a code base to build from. Plan for your own backend, your own permission rules and your own pages.

  • Replace Mock.js responses with your real API calls
  • Keep or remove sample pages such as tables, editors and charts
  • Adjust the permission rules to match your user roles

Know the browser and version limits

The README says the project does not support low version browsers such as Internet Explorer, and that you must add polyfills yourself. The browser support table in the same README lists IE10 and IE11, so the two statements do not agree. Test the browsers your users need before you commit.

The README badges show an older Vue and element-ui stack. If you need the newest Vue release for a new project, check the current state of the repository first.

What people use it for

  • An internal dashboard for managing customers, orders or staff records
  • A back-office settings area with login and page-level permissions
  • A table-heavy admin tool with inline editing and Excel import or export
  • A learning reference for how a larger Vue single-page app can be organised

Frequently asked questions

Is vue-element-admin free to use?

Yes, the project is licensed under MIT, as shown in the repository. The README also includes optional donation links, which are not required to use the code.

What do I need installed to run vue-element-admin?

You need Node.js and git. The README does not state which Node.js version to use, so check your team's standard. After cloning, run npm install and npm run dev.

Does vue-element-admin work with React?

No. The README only covers Vue, and the project is built on Vue and element-ui. If you need React, look for a React-based admin template instead.

Does vue-element-admin support Internet Explorer?

The README says the project does not support low version browsers such as IE and that you must add polyfills yourself. Its browser table lists IE10 and IE11, so the information is inconsistent. Test the browsers your users need.

What are the alternatives to vue-element-admin?

The README recommends vue-admin-template as a base template, electron-vue-admin for desktop apps and vue-typescript-admin-template for TypeScript projects. Choose based on whether you need a base template, desktop support or TypeScript.

Where can I get help if the install or build fails?

The README does not include a troubleshooting section. It points to the documentation site, the Gitter chat and the GitHub issues page, where you can report a problem.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

vue-element-admin suits developers who want a working Vue and element-ui admin starting point with login, permissions and sample pages to adapt. It is not a finished tool for non-developers, and it is a poor fit if you need React, strict Internet Explorer support or the newest Vue release. In those cases, compare it with vue-admin-template or another framework-specific option.

Install options & downloads