# vue-admin-better: a Vue 2 and Element UI admin template that runs on Rspack

> vue-admin-better is an MIT-licensed admin template built on Vue 2.7 and Element UI, with a Vue 3 sibling repository. Its selling point is restraint: fewer wrappers, faster builds, and a permission model you configure rather than inherit.

**zxwk1998/vue-admin-better** — 🎉 vue admin,vue3 admin,vue3.0 admin,vue后台管理,vue-admin,vue3.0-admin,admin,vue-admin,vue-element-admin,ant-design,vab admin pro,vab admin plus,vue admin plus,vue admin pro 

- Repository: https://github.com/zxwk1998/vue-admin-better
- Website: https://vuejs-core.cn/shop-vite/?form=github
- Stars: 18,931 · Forks: 3,924
- Language: Vue
- License: MIT
- Published: 2026-09-21 · Updated: 2026-09-21 · Language: en
- Canonical page: https://hysenlabs.com/projects/zxwk1998-vue-admin-better

## What vue-admin-better solves, and who it is actually for

Most admin templates fail in one of two directions. Either they wrap every Element UI component in a house abstraction, so you spend your first week reading the wrapper instead of the library, or they leave the routing, permission and request layers so bare that every project rebuilds them. vue-admin-better positions itself against the first failure. The README's own framing is "拒绝过度封装" (refuse over-encapsulation), and the repository layout backs that up: layouts/, mock/, src/ and vab-icon/ sit at the top level with no intermediate framework package. The two local dependencies, layouts and vab-icon, are file: references in package.json, which means the layout shell and the icon set ship as workspace packages rather than as published npm modules you would have to version separately.

The audience is stated plainly in the README: developers with one year or more of frontend experience who are using or intend to use element-ui or element-plus, who are comfortable with the Vue.js stack, and who have shipped a few real projects. That is a narrow band, and it is the right one. A beginner will not get much from a template whose permission layer depends on understanding how dynamic routes are added to the router instance. The README also lists 40+ single-page examples and 50+ global configuration options, which tells you the intended workflow is configuration and deletion rather than construction from scratch.

## RBAC, JWT and the two route permission modes

The permission model is the part worth understanding before you clone. The README describes an RBAC model with JWT-based control and two modes for route permissions: an intelligence mode where the frontend decides which routes a user can reach, and an all mode where the backend returns the route table and the frontend renders it. This is the single most consequential configuration decision in the project, because it determines where your source of truth for navigation lives.

In the backend-driven mode, the frontend receives routes and registers them dynamically, which the README lists as "后端路由动态渲染". That means the menu is a function of an API response, not of a static file in src/. It also means a misconfigured or unavailable backend produces an empty shell rather than a degraded menu, and the README does not document a fallback for that case. The intelligence mode keeps route definitions in the frontend and filters them against the user's roles, which is simpler to reason about locally but puts permission logic in code that ships to the browser. Neither mode is wrong; they fail differently. Frontend filtering is easier to debug and easier to bypass if your API is not independently authorised. Backend route tables centralise control but couple page availability to an API contract you must now version.

Supporting pieces are listed in the README's advantages section: RSA encryption on login via jsencrypt, which is in the dependency list; axios wrapping with multiple data sources and multiple success status codes; error log interception; and multi-theme, multi-layout switching. The axios wrapping is described as supporting several parameter-passing styles, which is a real convenience when your backend endpoints are inconsistent, and a real source of confusion when they are not.

## Installing vue-admin-better and starting the dev server

The README gives the install steps for the Vue 2.x branch, which is this repository. Note that the dependency install uses a Tencent Cloud npm mirror explicitly, and that the dev server is launched through the Rspack wrapper script rather than through vue-cli-service. The clone command pins the master branch.

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

The third command maps to node --no-deprecation rspack.js serve in package.json, so the build pipeline is driven by rspack.config.js and rspack.js at the repository root. If you expect a webpack.config.js, there is not one; the README's 2026 section claims a 10-15x runtime improvement and a 20-30x packaging improvement from this switch, with total build time under five seconds. Those are the project's own numbers, not measurements I can verify, and they describe build tooling rather than application performance.

For a production bundle the script is simply npm run build, which runs the same rspack.js with the build argument. Linting is wired to ESLint with the --fix flag across src, mock and library, and a pre-commit hook runs lint-staged on staged js, jsx and vue files. The README warns that the project uses the strictest ESLint preset, plugin:vue/recommended, and recommends enabling auto-fix in your editor, with VSCode named as the suggestion. It also warns that the project uses LF line endings, so a Windows checkout with autocrlf enabled will produce diff noise on every file.

## The Vue 3 and Arco variants are different repositories, not branches

This is the detail that trips people up when they search for vue-admin-better and land on the wrong install instructions. The README lists three separate codebases: this repository for Vue 2.x with Element UI, a Vue 3.x repository with Element Plus at github.com/zxwk1998/vue3-admin-better, and an Arco Design variant at github.com/zxwk1998/vue-admin-arco. The Vue 3 repositories install with pnpm i against the same mirror but start with npm run dev rather than npm run serve:rspack.

That split has a practical cost. Fixes and configuration options do not automatically flow between the Vue 2 and Vue 3 lines, and the README does not describe a shared core. If you are starting a new project today, the Vue 2 line is the one whose version numbers and dependency list you can read here, but it also pins vue to ~2.7.14 and element-ui to ^2.15.14, both of which are on the older side of the ecosystem. Choosing the Vue 3 repository means reading a different README for install and configuration details. Choosing this one means accepting Vue 2.7, which is the last Vue 2 release line and does support the composition API, but is not where new Vue work is heading.

The commercial variants are also separate: Admin Pro on Vue 2 and Element UI, Admin Plus on Vue 3 and Element Plus, and Shop Vite on Vue 3, Vite 7 and Element Plus. The README links demos for all three. Nothing in the open repository gates features behind them, but the existence of a paid line is worth knowing when you evaluate how much attention the free templates will keep receiving.

## Where vue-admin-better is the wrong choice

Three cases stand out. The first is a team that has already standardised on Vue 3 and the composition API for new work. This repository is Vue 2.7 with Element UI; the Vue 3 equivalent is a different clone URL, and the README does not present a migration path from one to the other. Starting here and planning to move later means a rewrite of the layout and permission layers, not a dependency bump.

The second is any project that needs a component library other than Element UI or Element Plus. The repository is built around element-ui, and the Arco variant is a separate codebase with its own demo and its own install command. There is no adapter layer described in the README that would let you swap the UI kit inside this repository.

The third is a project where the frontend cannot be trusted to enforce permissions. The intelligence mode filters routes in the browser. If your API endpoints are not independently authorised, a user who edits the route table in devtools reaches pages the menu hid. The README presents both modes as options without discussing this asymmetry, and that omission is the most important thing to reason about yourself.

There is also a maintenance question the README does not answer. The install instructions pin a specific npm mirror, and the clear script references registry.npmmirror.com. Neither is a defect, but it means the default setup assumes a network path that may not be available or desirable in a corporate environment, and you will need to decide whether to override the registry.

## How it compares with Gin-vue-admin and vue-pure-admin

The alternatives people search for alongside this project differ in where the backend lives. Gin-vue-admin pairs a Vue frontend with a Go backend and generates server code alongside the UI, so it answers a question this project does not attempt: what the API layer looks like. vue-admin-better ships a mock/ directory with Mock.js and describes automatic mock generation and export as an advantage, but it does not generate a backend. If you want the server and the admin UI to come from one scaffold, Gin-vue-admin is the closer fit; if you already have an API and only need the UI, the mock layer here is enough to develop against.

vue-pure-admin and Vue Vben Admin are the other frequent comparisons, and the axis that separates them from this project is the wrapper question again. The README's stated position is minimal encapsulation, and its feature list is correspondingly concrete: error log interception, 7Z archive generation on build, SCSS auto-sorting, RSA login encryption. A template that leans the other way would present its abstraction layer as the feature. Neither approach is better in the abstract, but they demand different reading habits. With this project you read Element UI's documentation more than the template's; with a heavily abstracted template you read the template's.

Naive UI Admin and Vue admin arco differ on the component library rather than on architecture. If you have already chosen Naive UI or Arco Design, the comparison with this repository is settled before it starts.

## Licence, upgrade cost and what the repository does not tell you

The licence is MIT, and the README states that the open version can be used commercially for free provided the licence notice is retained. It repeats this in a dedicated section titled with commercial-use notes. MIT is permissive and carries no copyleft obligation, but the README's phrasing adds a request rather than a condition: it asks for a star if convenient. That is a request, not a term of the licence. If your organisation has a policy on attribution notices, the requirement is the standard MIT one, and nothing here changes it. This is a description of the licence text, not legal advice.

Upgrade cost is the weakest documented area. There is a module:update script that runs npm-check-updates with a long --reject list covering vue-loader, vue-echarts, webpack, eslint-plugin-prettier, prettier, sass-loader, sass, screenfull, eslint, chalk, vue, vue-template-compiler, vue-router, vuex and several @vue/cli packages. That reject list is effectively a statement that those packages cannot be bumped without breaking the build, and it is the clearest signal in the repository about where the upgrade friction lives. Vue itself is pinned to ~2.7.14, so the framework version is frozen by design.

What the README does not cover: the minimum Node.js version, the minimum pnpm version, any migration guide between the Vue 2 and Vue 3 repositories, and any rollback procedure if the backend-driven route mode fails in production. The repository has no retrieved releases, so there is no changelog to consult for breaking changes between versions. The last push to the default branch was on 2026-09-18, which is recent, but the absence of tagged releases means you are tracking master rather than a version.

## Conclusion

Adopt vue-admin-better if you are already committed to Element UI on Vue 2.7, or to Element Plus on the Vue 3 sibling repository, and you want a permission model you can switch between frontend and backend route control without rewriting the layout layer. Do not adopt it if your team is standardising on Vue 3 composition API in this repository, or if you need a component library other than Element UI; the Arco variant lives in a separate repository. Before committing, clone the branch, run the Rspack dev server, and verify two things in your own code: that your backend can return the route payload the all mode expects, and that your Node version satisfies the Rspack toolchain. The README documents neither the minimum Node version nor a rollback path for the dynamic route mode.

## FAQ

### What is vue-admin-better?

It is an MIT-licensed admin template built on Vue 2.7 and Element UI, with RBAC and JWT permission control and dynamic route rendering. The README describes it as deliberately avoiding over-encapsulation, and it ships 40+ single-page examples and 50+ global configuration options.

### How do I install vue-admin-better?

Clone the master branch, install dependencies with pnpm against the Tencent Cloud mirror shown in the README, then run npm run serve:rspack for local development. The production build is npm run build, and both scripts run through rspack.js.

### Is vue-admin-better free for commercial use?

The README states that the open version can be used commercially for free as long as the licence notice is retained, and the repository is MIT licensed. The README adds a request for a star, which is a request and not a condition of the licence.

### Is Vue 3 faster than Vue 2?

The README does not compare the two runtimes. What it does claim is that this repository's build tooling, switched to Rspack, improves runtime by 10-15x and packaging by 20-30x with total build time under five seconds; those are build figures, not a Vue 2 versus Vue 3 comparison.

### Is Vue.js still widely used?

The README does not address this. It states only that the project targets developers using element-ui or element-plus with at least one year of frontend experience, and that the Vue 3 variants live in separate repositories.

## Sources

- [Issues](https://github.com/zxwk1998/vue-admin-better/issues)
- [License: MIT](https://github.com/zxwk1998/vue-admin-better/blob/master/LICENSE)
- [Project website](https://vuejs-core.cn/shop-vite/?form=github)
- [README](https://github.com/zxwk1998/vue-admin-better/blob/master/README.md)
- [zxwk1998/vue-admin-better on GitHub](https://github.com/zxwk1998/vue-admin-better)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/zxwk1998-vue-admin-better