Guide · Open source

How to use ant-design-vue-pro: clone, run and customize

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

ant-design-vue-pro is an open-source starter project for building enterprise admin dashboards and back-office web apps with Vue 2 and the Ant Design Vue component library. Instead of building the admin layout from scratch, you clone the project, install its dependencies and customize it. This guide covers setup, the commands the project provides, what is included and when the project is a poor fit.

Ant Design Vue ProvueComponent/ant-design-vue-pro · ★ 10.9k · MIT Install options & downloads

Quick start

1Clone the repository. Run git clone on the ant-design-vue-pro repository, then cd into the ant-design-vue-pro folder.
2Install dependencies. Run yarn install in the project folder. The README recommends yarn because of its yarn.lock file.
3Start the dev server. Run yarn run serve to compile the app and hot-reload changes in the browser.
4Review the layout and components. Explore the dashboard and pages in the source tree, using the preview site and documentation as references.
5Customize theme, locales and mock data. Edit the theme guide settings, src/locales/index.js for translations and src/mock/index.js for mock data during development.
6Build for production. Run yarn run build to compile and minify for production, and use the release version as the README asks.

What ant-design-vue-pro includes

The README describes the project as an out-of-box UI solution for enterprise applications, delivered as a Vue boilerplate based on Ant Design of Vue. It is the Vue 2 edition; the README points to a separate Vue 3 version for newer projects.

The stack listed in the README includes Ant Design Vue 1.x, vue-cropper for picture editing, AntV G2 for charts, and Viser-vue as the Vue wrapper for AntV G2. The project uses Vue CLI 3, webpack and eslint.

Ant Design Vue 1.x component library
vue-cropper for picture editing
@antv/g2 and Viser-vue for charts
Vue CLI 3, webpack and eslint
Locales for internationalisation (src/locales/index.js)
Custom theme support, as described in the README

Prerequisites: Node.js and yarn

You need Node.js and yarn. The README does not specify a Node.js version, so check the project's documentation or try a current LTS release if you hit install errors. The README recommends yarn because it uses the yarn.lock file to load the exact package versions used by the demo site. npm is also mentioned as possible.

Node.js (version not specified in the README)
yarn (recommended)
npm (mentioned as an option)

Install and run the project locally

Clone the repository, move into the project folder, install dependencies and start the development server. The dev server compiles and hot-reloads the app.

Run the clone, install and serve commands in this order.
Use yarn run build when you need a production build, and yarn run lint to lint and fix files.

git clone https://github.com/vueComponent/ant-design-vue-pro.git
cd ant-design-vue-pro
yarn install
yarn run serve

Customize the admin app

Most changes start in the source tree. The README points to /src/main.js for load-on-demand: the imports in ./core/lazy_use and ./core/use are referenced there. Theme customisation is covered by a linked guide, and i18n is handled through src/locales/index.js.

Mock data is not used in production. The README says the production env mock is disabled and points to src/mock/index.js. The README also asks that you use the release version rather than a development branch.

Load on demand: see /src/main.js and docs/load-on-demand.md
Theme: follow the custom theme guide linked in the README
Translations: src/locales/index.js
Mock API data: src/mock/index.js (disabled in production)
Lint: remove the eslintConfig field in package.json and set lintOnSave to false in vue.config.js to disable ESLint (not recommended)

Check browser support before you commit

The README lists IE10 and Edge, plus the last 2 versions of Chrome, Firefox, Safari and Opera. If your users need a browser outside that list, this project may not fit.

For questions and bug reports, the README asks you to read the Issue and PR contributing guide before opening an issue.

What people use it for

Starting an internal admin panel for staff tools on Vue 2
Building a back-office dashboard with charts from AntV G2 via Viser-vue
Adding Ant Design Vue components to an existing Vue 2 codebase that needs this admin style
Adding picture cropping to a user profile or upload form with vue-cropper

Frequently asked questions

Is ant-design-vue-pro free to use?

The project is released under the MIT licence, as shown in the README and the repository badge. Check the LICENSE file in the repository for the full terms.

What do I need to install ant-design-vue-pro?

You need Node.js and yarn. The README does not specify a Node.js version, and it mentions that npm can also be used, though yarn is recommended.

Is there a Vue 3 version of ant-design-vue-pro?

Yes. The README says the Vue 3 version is Ant Design Vue Pro for Vue 3 and links to it. This repository is the Vue 2 edition.

How do I start the development server?

After cloning and running yarn install, run yarn run serve. The README says this compiles and hot-reloads for development.

Which browsers are supported?

The README lists IE10 and Edge, plus the last 2 versions of Chrome, Firefox, Safari and Opera. It describes these as modern browsers and IE10.

What are the alternatives to ant-design-vue-pro?

The source lists Ant Design Pro (React), Vue Element Admin, Vben Admin and Ant Design Vue Pro for Vue 3 as comparable projects. Pick Vue Element Admin or Vben Admin if you prefer a different component library, or the Vue 3 edition if you do not need Vue 2.

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

Choose ant-design-vue-pro if you are a developer building an admin panel or dashboard on Vue 2 and you want Ant Design Vue components and charts as a working starting layout. Pick the Vue 3 edition for new Vue 3 projects, and avoid this project if you need old-browser support beyond the listed browsers or you are not comfortable setting up a development environment.

Install options & downloads