Vite 中文文档
V3 Admin Vite Logo # 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

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
Annotation：Each configuration item is written with as detailed comments as possible
Mobile Compatible: The layout is compatible with mobile page resolution

Functions


User management: log in, log out of the demo
Authority management: Built-in page permissions (dynamic routing), instruction permissions, permission functions
Multiple Environments: Development, Staging, Production
Multiple themes: Normal, Dark, Dark Blue, theme 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

📚 Document


Chinese documentation

Chinese getting started tutorial

Gitee repository


Gitee

Online preview


Location account Link
:--- :--- :---
github-pages admin or editor Link

🚀 Development


  1. ``` shell
  2. # configure
  3. 1. installation of the recommended plugins in the .vscode directory
  4. 3. node version 16+
  5. 4. pnpm version 7.x

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

  10. # enter the project directory
  11. cd v3-admin-vite

  13. # install dependencies
  14. pnpm i

  16. # start the service
  17. pnpm dev
  18. ```

✔️ Preview


  1. ``` shell
  2. # stage environment
  3. pnpm preview:stage

  5. # prod environment
  6. pnpm preview:prod
  7. ```

📦️ Multi-environment packaging


  1. ``` shell
  2. # build the stage environment
  3. pnpm build:stage

  5. # build the prod environment
  6. pnpm build:prod
  7. ```

🔧 Code inspection


  1. ``` shell
  2. # code formatting
  3. pnpm lint

  5. # unit test
  6. pnpm test
  7. ```

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


preview1.png preview2.png preview3.png

💕 Contributors


Thanks to all the contributors!

💕 Thanks for the sponsorship (the cost of sponsorship was used to send red envelopes in the group~)


Name Avatar
:--- :---
a3305278

💕 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)

Group


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

qq.png wechat.png

📄 License


MIT

Copyright (c) 2022 pany