V3 Admin Vite

English | 中文

⚡ Introduction

V3 Admin Vite is a free and open source middle and background management system basic solution, based on mainstream framework such as Vue3, TypeScript, Element Plus, Pinia and Vite

• Vue Cli 5.x: v3-admin
• Electron desktop: v3-electron-vite

China repository: Gitee

📚 Document

• Chinese documentation: link
• Chinese getting started tutorial: link

📺 Online preview

Location	account	Link
github-pages	admin or editor	link

❤️ Generate electricity with love

• Completely free：But hopefully you order a star !!!
• Very concise：No complicated encapsulation, no complicated type gymnastics, out of the box
• Detailed annotations：Each configuration item is written with as detailed comments as possible
• Latest dependencies: Regularly update all third-party dependencies to the latest version
• Very specification: The code style is unified, the naming style is unified, and the comment style is unified

Feature

• Vue3：The latest Vue3 composition API using Vue3 + script setup
• Element Plus：Vue3 version of Element UI
• Pinia: An alternative to Vuex in Vue3
• Vite：Really fast
• Vue Router：router
• TypeScript：JavaScript With Syntax For Types
• PNPM：Faster, disk space saving package management tool
• Scss：Consistent with Element Plus
• CSS variable：Mainly controls the layout and color of the item
• ESlint：Code verification
• Prettier： Code formatting
• Axios: Promise based HTTP client (encapsulated)
• UnoCSS: Real-time atomized CSS engine with high performance and flexibility
• Mobile Compatible: The layout is compatible with mobile page resolution

Functions

• User management: Log in and out of the demo
• Authority management: Page-level permissions (dynamic routing), button-level permissions (directive permissions, permission functions), and route navigation guards
• Multiple Environments: Development, Staging, Production
• Multiple themes: Normal, Dark, Dark Blue, three theme modes
• Multiple layouts：Left, Top, Left Top, three layout modes
• Error page: 403, 404
• Dashboard: Display different Dashboard pages according to different users
• Other functions：SVG, Dynamic Sidebar, Dynamic Breadcrumb Navigation, Tabbed Navigation, Screenfull, Adaptive Shrink Sidebar, Hook (Composables)

🚀 Development

# configure
1. installation of the recommended plugins in the .vscode directory
2. node version 18.x or 20+
3. pnpm version 8.x or latest

# clone
git clone https://github.com/un-pany/v3-admin-vite.git

# enter the project directory
cd v3-admin-vite

# install dependencies
pnpm i

# start the service
pnpm dev

✔️ Preview

# stage environment
pnpm preview:stage

# prod environment
pnpm preview:prod

📦️ Multi-environment packaging

# build the stage environment
pnpm build:stage

# build the prod environment
pnpm build:prod

🔧 Code inspection

# code formatting
pnpm lint

# unit test
pnpm test

Git commit specification reference

• feat add new functions
• fix Fix issues/bugs
• perf Optimize performance
• style Change the code style without affecting the running result
• refactor Re-factor code
• revert Undo changes
• test Test related, does not involve changes to business code
• docs Documentation and Annotation
• chore Updating dependencies/modifying scaffolding configuration, etc.
• workflow Work flow Improvements
• ci CICD
• types Type definition
• wip In development

Project preview

💕 Contributors

Thanks to all the contributors!

💕 Thanks star

Small projects are not easy to get a star, if you like this project, welcome to support a star! This is the only motivation for the author to maintain it on an ongoing basis (whisper: it's free after all)

☕ Donate

See how to donate

Group

QQ group：1014374415 (left) && add me on WeChat，Invite you to join WeChat group (right)

📄 License

MIT

Copyright (c) 2022-present pany