A new generation vue 3 admin template using with vite2 & Element-Plus UI

A basic vue3 admin template with vite2 & Element-Plus UI & axios & svg-icon& permission control & lint

A new generation admin construct using vue3(setup-script)+vite2+element-plus ,It’s fast!

Use eslint+prettier+gitHooks format and verification code to improve code standardization and development efficiency


—- Let’s look at the loading speed and the size of the built package first.:


The framework is available in js, ts and plus versions

development and experience:two words Really fragrant!!!!!


— Efforts are being made to develop documents ……

You can refer to first:documentation of vue-admin-template

The difference with vue-admin-template

1.The layout method uses flex instead of the previous float, and the float layout method is completely removed, and some layout methods are optimized.

2.Use vue3 (setup-script) to write, replace webpack with vite2, add vue3’s jsx writing method, vite2 is faster, use vue3 composition instead of vue2 option api writing, easier to maintain and migrate

3.Simplified some complex logic and optimized the design method of the architecture part

Comparison of performance between vue3 and vue2

  • 41% reduction in package size

  • The initial rendering is 55% faster, the update rendering is 133% faster

  • Memory reduction 54%

  • Use Proxy instead of defineProperty to implement data responsiveness

  • Rewrite the implementation of virtual DOM and Tree-Shaking

Comparison of packaging speed between vite2 and webpack

Build Setup

# clone the project
git clone

# enter the project directory
cd vue3-admin-template

# install dependency(Recommend use yarn)

# develop
yarn run dev

using the browser to open http://localhost:5001


# build for dev environment
yarn run build-serve

# build for production environment
yarn run  build


# preview the dev environment effect
yarn run preview:build-serve

# preview the release environment effect
yarn run preview

# code format check
yarn run lint

Architecture development is not easy. If you feel good, please give me a compliment. The architecture is still being improved. Welcome to join me in development and become Contributors together! ! ! !

Note: Vue3 is not supported the Internet Explorer

Modern browsers and Internet Explorer 11+.

IE / EdgeIE / Edge FirefoxFirefox ChromeChrome SafariSafari
Edge last 2 versions last 2 versions last 2 versions

Discussion and Communication

WeChat group


MIT license.

Copyright (c) 2021-present kuanghua

Leave a Reply

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

GIPHY App Key not set. Please check settings

Hey there 👋 – DEV Community

Act as part of the business code and will report aqua scan report after application installed