micro-frontend-template

English | 中文

A minimal micro-frontend-template with Element-Plus UI & axios & permission control & lint & hook

A new generation micro-frontend-template 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

Vite need Node.js >= 12.0.0。

Update log

--- to look the doc

• 真香定律！带你用vue3+vite2撸后台（系列文章入口）

Documents

• 真香定律！带你用vue3+vite2撸后台（系列文章入口）

Online experience

github address

Access address

国内体验地址：http://8.135.1.141/micro-frontend-template

github 地址： https://github.com/jzfai/micro-frontend-template.git

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 , plus and electron versions

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

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

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/micro-frontend-template.git

# enter the project directory
cd micro-frontend-template

# pnpm address https://pnpm.io/zh/motivation
# install dependency(Recommend use pnpm)
# you can  use "npm -g i pnpm" to install pnpm 
pnpm i

# develop
pnpm run hostall:dev

using the browser to open http://localhost:5012/vue3-micro-frontend/

Build

# build for production environment
pnpm run  hostall:preview

Others

# preview the release environment effect
pnpm run hostall:preview-offline

# code format check
pnpm run lint

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