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
- 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！！！！！
-- 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
# 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 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 / Edge||Firefox||Chrome||Safari|
|Edge||last 2 versions||last 2 versions||last 2 versions|
Discussion and Communication
Copyright (c) 2021-present kuanghua