Skip to content
Get packs

Guide · Open source

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

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

vue-admin-template is an MIT-licensed starter project for building admin dashboards with Vue. It comes with Element UI, axios, icon fonts and lint checks already wired up, so you can start from a working base. This guide walks through cloning it, running it locally, building it and deciding whether it fits your project.

vue-admin-templatePanJiaChen/vue-admin-template · ★ 20.4k · MIT

Quick start

  1. 1Clone the repository. Run git clone on the PanJiaChen/vue-admin-template repository and move into the folder.
  2. 2Install dependencies. Run npm install inside the project directory.
  3. 3Start the dev server. Run npm run dev and open http://localhost:9528 in your browser.
  4. 4Build for your environment. Run npm run build:stage or npm run build:prod depending on where you deploy.
  5. 5Check your code. Run npm run lint, and use npm run lint -- --fix to auto-fix issues.

What vue-admin-template includes

The project is described in its README as a minimal Vue admin template with Element UI, axios, iconfont, permission control and lint. It is meant to be a clean base you extend with your own pages and logic rather than a finished product.

The current version is built on vue-cli. An older version that does not rely on vue-cli is available on the 3.11.0 tag.

  • Element UI components
  • axios for calling servers
  • Icon fonts (iconfont)
  • Lint checks
  • Browsers: modern browsers and Internet Explorer 10+ according to the README

What you need before you start

The README lists Node.js and npm as the prerequisites. It does not state a required version, so check the project's own files or documentation before you install.

You should be comfortable running terminal commands and editing code. The README assumes this.

  • Node.js and npm installed on your machine
  • Basic familiarity with Vue and Element UI
  • A terminal to run commands

Install and run vue-admin-template locally

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

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

Build the project for test or production

When you are ready to deploy, the README gives separate build commands for a test environment and a production environment. To check the release output before deploying, use the preview command. Add --report to also get static resource analysis.

# build for test environment npm run build:stage # build for production environment npm run build:prod # preview the release environment effect npm run preview # preview with static resource analysis npm run preview -- --report

Check and fix code style with lint

The project includes a code format check. Run the first command to check your code, or add --fix to have it fix issues automatically.

# code format check npm run lint # code format check and auto fix npm run lint -- --fix

Know the limits: permissions and TypeScript

The main branch does not include role-based route permissions. The README says that feature lives in a separate permission-control branch, which also generates menus by user role.

For TypeScript, the README points to a separate project, vue-typescript-admin-template, instead of this template.

  • Router permissions and role-based menus: use the permission-control branch
  • TypeScript: use vue-typescript-admin-template

What people use it for

  • Starting a new internal admin panel or back-office tool in Vue
  • Building a small admin base that your team extends with its own pages and logic
  • Developing a Vue and Element UI dashboard for a team already familiar with those tools

Frequently asked questions

What do I need to install vue-admin-template?

The README lists Node.js and npm as prerequisites. It does not state a specific Node.js version, so check the project's files or documentation for that.

Is vue-admin-template free to use?

The project is released under the MIT license, as stated in its README. The license file is linked from the repository.

How do I start vue-admin-template?

Clone the repository, run npm install inside the folder, then run npm run dev. The README says this opens http://localhost:9528.

Does vue-admin-template support TypeScript?

Not in this template. The README points to vue-typescript-admin-template as a separate TypeScript version.

Does vue-admin-template have role-based permissions?

The main branch does not. The README says router permissions and role-based menus are in the permission-control branch.

How does vue-admin-template compare to vue-element-admin?

The README lists vue-element-admin as a related project by the same author. This guide does not compare features in detail, so check both READMEs to see which fits your needs.

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

Use vue-admin-template if you are a developer starting a new internal admin panel in Vue and you are comfortable with Element UI and npm commands. Pick something else if you need a ready-made dashboard with no coding, TypeScript out of the box, or role-based permissions on the main branch.

Install options & downloads