Skip to content
Get packs

Guide · Open source

How to use vue-admin-better: clone, run and customise

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

Vue Admin Better is a starter template for back-office admin panels, with dashboards, menus, pages and permissions built on Vue 2 and Element UI. This guide shows you how to get the project from GitHub, install its dependencies and start the local development server. It also explains what the template includes and who it suits, so you can decide whether it fits your project.

Vue Admin Betterzxwk1998/vue-admin-better · ★ 18.9k · MIT

Quick start

  1. 1Install Node.js and pnpm. Install Node.js and pnpm, the two prerequisites named in the README.
  2. 2Clone the repository. Run git clone -b master on the vue-admin-better repository to download the Vue 2 and Element UI edition.
  3. 3Install dependencies. Run pnpm i in the project folder. Adjust or remove the registry flag if the mirror is not reachable.
  4. 4Start the dev server. Run npm run serve:rspack and open the local address the server reports in your terminal.
  5. 5Explore the source. Read the pages, menus and permission code to see how the template is organised before you change it.

What is vue-admin-better and who is it for?

Vue Admin Better is a front-end starter template for building admin panels. The README says it avoids over-wrapping the code so that projects stay simple to read and change. It is MIT licensed and is written in Vue.

The project is aimed at front-end developers with about a year of experience who want an admin panel starting point, and at teams already using Vue 2 and Element UI. It is a good fit if you want to read and customise the template source. The README lists Vue.js experience as a prerequisite, so it is not designed for complete beginners.

  • Includes RBAC permission control with JWT and dynamic, backend-driven routes
  • Supports multiple themes and layouts, and both PC and mobile layouts
  • Offers a README-listed option for login RSA encryption and error log interception

What do you need before you install?

The README names two prerequisites: Node.js and pnpm. Install both before you clone the project. The install method is clone-and-build, so you run the commands below from a terminal in the folder where you want the project to live.

  • Node.js
  • pnpm

How do you clone and install vue-admin-better?

Clone the repository from GitHub using the master branch, then move into the project folder. Next, install the dependencies with pnpm. The README's install command points pnpm at a specific npm registry mirror through the --registry flag. If that mirror is not reachable from your network, you can remove or change that flag, as the README does not describe any other setup.

git clone -b master https://github.com/zxwk1998/vue-admin-better.git pnpm i --registry=http://mirrors.cloud.tencent.com/npm/

How do you start the local development server?

Run the start command from the README to launch the project locally. The README lists this command under the Vue 2.x (Element UI) section, which is the repository this guide covers.

If you want the Vue 3 editions, the README links to separate repositories: one for Vue 3 with Element Plus and one for Vue 3 with Arco Design. Each has its own clone and start commands, so follow the README in that repository rather than this one.

npm run serve:rspack

What can you customise once it runs?

The README highlights several configuration and developer features. It says the project offers more than 50 global configuration options, supports switching between front-end and back-end controlled route permissions, and includes automatic mock generation and export. It also notes that the project uses strict ESLint rules (plugin:vue/recommended), that LF line endings are the default, and that VSCode is recommended with auto-fix on save.

Because the code is kept close to plain Vue, you can change pages, menus and permission rules directly in the source. The README also describes a feature map diagram that you can open from the repository to see how the parts fit together.

  • Route permissions: front-end control or back-end control
  • Mock data generation and export
  • Axios wrapper that supports multiple data sources and success status codes
  • Builds can produce a 7Z archive, according to the README

How does it compare with other admin templates?

The README does not contain a direct comparison. Projects often considered alongside it include vue-element-admin, vue-vben-admin, vue3-element-admin and SoybeanAdmin. Choose based on your Vue version, UI library and how much you want to read and change the code. If you need Vue 3 with Element Plus or Arco Design, use the separate repositories the README links to.

What people use it for

  • Starting a back-office dashboard with menus, pages and role-based permissions
  • Building an internal tool for a team already using Vue 2 and Element UI
  • Learning how an admin template handles routing, permissions and layouts by reading its source
  • Creating a multi-theme or multi-layout admin panel that also works on mobile

Frequently asked questions

Is vue-admin-better free to use commercially?

The README says the open-source version is MIT licensed and can be used commercially for free, as long as you keep the licence notice. The README also links to separate commercial editions, which are not described in detail here.

What are the requirements for vue-admin-better?

The README lists Node.js and pnpm as prerequisites. It also says the project suits developers with about a year of front-end experience who know the Vue.js stack.

Does vue-admin-better support Vue 3?

This repository is the Vue 2 and Element UI edition. The README points to separate repositories for Vue 3 with Element Plus and for Vue 3 with Arco Design.

How do I install vue-admin-better?

Clone the GitHub repository with git clone -b master, then install dependencies with pnpm i. Start the local server with npm run serve:rspack.

Is vue-admin-better good for beginners?

Probably not. The README lists Vue.js experience as a prerequisite, so beginners may find the project hard to follow without first learning Vue basics.

What are the alternatives to vue-admin-better?

The README mentions comparable projects including vue-element-admin, vue-vben-admin, vue3-element-admin and SoybeanAdmin. Pick one that matches your Vue version and UI library.

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 Admin Better suits developers who already know Vue and Element UI and want a simple, readable admin template with role-based permissions that they can change directly. Pick a different project if you need Vue 3 in this repository, a non-Vue framework, or a gentler starting point for beginners.

Install options & downloads