vue3-admin-electron

Chinese | English

This is a basic Vue3 Admin Electron desktop terminal platform. Contains the most basic electron development build steps and uses Demo, a set of code that can be packaged simultaneously for Win, MAC, and Linux platforms.

The technology used in this architecture is: electron13+vue3(setup-script)+ Vite2 + Element-Plus, a new generation of cross-desktop framework, It’s easy and fast!

Use ESLint + Prettier +gitHooks and verify code to improve code standardization and development efficiency

Update log

/ / 11-01
add demo of electron
Copy the code

Online experience (Download the installation package and install the experience)

Github address: github.com/jzfai/vue3-…

Link: pan.baidu.com/s/1UUWwh1Zx…

Extraction code: 4293

example

— win

— mac

Related projects

The frames are available in JS, TS, PLUS and ELECTRON versions

  • Electron version: vue3 – admin – electron
  • Js version: vue3-element-admin
  • Ts version: vuE3-element-TS
  • Js example see plus version: vue3-element-plus
  • React version: react-admin-template
  • Java microservice background data: micro-service-Plus

Development and use experience: two words really sweet ！！！！！

The document

Documentation efforts under development…

Comparison of performance between VUE3 and VUE2

  • Package size reduced by 41%

  • Initial rendering is 55% faster and updated rendering is 133% faster

  • Memory reduced by 54%

  • Use Proxy instead of defineProperty for data responsiveness

  • Rewrite virtual DOM implementation and tree-shaking

Vite2 and Webpack speed comparison

Build steps

# Clone project
git clone https://github.com/jzfai/vue3-admin-electron.git

Enter the project directory
cd  vue3-admin-electron

Install dependencies (yarn is recommended)
yarn

# Start the service (the page is hot loaded. The electron module will not be hot loaded. If both modules need to be hot loaded, you can use Yarn Run electron:nodemon to start the service.)
yarn run electron:dev
Copy the code

release


# Build packagingYarn Run electron:build > Note: Pack exe files in Windows and DMG files in MAC. Separate the files as far as possibleCopy the code

other

# Code format check and automatic repair
yarn run lint
Copy the code

function

- Login/Logout - Permissions Verification - Page Permissions - Directive permissions - Permissions Configuration - Two-step Login - Multi-environment publishing - serve-Build - Priview - Lint - Global features #- Internationalization of multiple languages #- Multiple dynamic peels - Dynamic sidebar (supports multi-level routing nested) - Dynamic Breadbreading - Quick navigation (tabs) - Svg Sprite icon - Local/back-end Mock data #- Screenfull - Adaptive Shrink sidebar - Editor - Rich text - Markdown #- JSON etc multi-format #- Excel #- Export Excel #- Import Excel #- Front-end Visualization Excel #- Export ZIP - Table - Dynamic table #- Drag and drop table #- Inline edit - Error page - 401-404 - Component - Avatar upload - Return to top #- Drag Dialog #- drag Select #- drag Kanban #- List drag #- SplitPane #- Dropzone #- Sticky #- CountTo - Composite instance - Error log - Dashboard #- Boot page - ECharts Chart #- Clipboard #- Markdown2htmlCopy the code

Note: #– not implemented yet (hope we can develop together)

additional

The architecture is not easy to develop. If it feels good, please give me a thumbs up. The architecture is still improving

Browser support

Note: Vue3 does not support Internet Explorer. Modern Browsers and Internet Explorer 11+ are browsers.



IE / Edge

Firefox

Chrome

Safari
Edge last 2 versions last 2 versions last 2 versions

Discussion and exchange (including electron Cross desktop video tutorial)

WeChat group

version

MIT license.

Copyright (c) 2021-present kuanghua