vue3-admin-template

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

Demo

---- Let's look at the loading speed and the size of the built package first.：

Related items

The framework is available in js, ts and plus versions

• js version：vue3-element-admin
• ts version：vue3-element-ts
• js version for plus：vue3-element-plus
• react version： react-admin-template
• java Micro-service background data：micro-service-plus

development and experience：two words Really fragrant！！！！！

Documents

-- 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 https://github.com/jzfai/vue3-admin-template.git

# enter the project directory
cd vue3-admin-template

# install dependency(Recommend use yarn)
yarn

# develop
yarn run dev

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

Build

# build for dev environment
yarn run build-serve

# build for production environment
yarn run  build

Others

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

# preview the release environment effect
yarn run preview

# code format check
yarn run lint

Extra

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! ! ! !

Browsers support

Note: Vue3 is not supported the Internet Explorer

Modern browsers and Internet Explorer 11+.

IE / Edge	Firefox	Chrome	Safari
Edge	last 2 versions	last 2 versions	last 2 versions

Discussion and Communication

WeChat group

License

MIT license.

Copyright (c) 2021-present kuanghua