in

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

Demo

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

687474703a2f2f382e3133352e312e3134312f66696c652f696d616765732f74656d706c6174652d64656d6f2e706e67

The framework is available in js, ts and plus versions

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

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

License

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