English | 中文
V-Naive Admin is a free and open source middle and back office template. The latest mainstream technologies such as' vue3 Vite 3 TypeScript 'have been used to develop the out of the box front-end solution for the middle and back ends. I am writing an open source project for the first time, and I am also in a learning stage. The code may not be written gracefully. If you have better suggestions for my code and hope you can put forward a valuable button, I will humbly learn. Thank you.
We have accessed OSCS Murphy Security ScanThe admin source code has not been scanned out of any risk items. More than 100% of the items are harmless to humans and animals! You can use it with confidence. Of course, if you don't trust, we recommend that you read the clone admin source code before using it. We are 100% open source, and you can see if there are risks.
- 🎉 Latest technology stack：Developed using Vue3/Vite3 and other front-end cutting-edge technologies
- 🎉 TypeScript: Language of application level JavaScript
- 🎉 Components (Under development) Secondary encapsulation of multiple commonly used components
- 🎉 jurisdiction Built in multiple dynamic routing permission generation schemes
- 🎉 theme：Free, flexible and configurable theme
- 🎉 internationalization：Built in internationalization scheme
- 🎉 Mock data Built in Mock data scheme
- 🎉 Naive-ui A new UI promoted by Youda, fully TypeScript written, with many components, convenient theme configuration and free use
- 🎉 Pinia Pinia is Vue's repository. It has the same functions as Vuex, and is more comfortable than Vuex in ease of use. You can't put down the code prompt
- 🎉 axios Easy to use, concise and efficient http library
- 🎉 Eslint Built in code development specification to solve the problem of writing style inconsistency between multiple developers
- V-Naive-Admin - Full Chinese website
Test account: Admin / Pass123456!
✅ Basic functions of background management system
✅ eslint husky prettier stylelint cz-customizable
✅ Three common routing modes ROLE / BACK / MOVE
✅ (Dark / Light)theme / System theme / Top bar theme / Menu Theme
✅ Automatically introduce most UI components/custom global (src/components/*) components Icon / plug-in Api Reduce the number of imports
✅ The secondary packaging axios is simpler to use, and multiple functions are added to help development see README
✅ Support Mock data independent of backend
✅ Pinia I don't know until I experience it (It's great to tell you secretly 🤭)
🔳 admin doc
🔳 Vue Router keepAlive
🔳 Vue Router animation
🔳 Encapsulate common components
🔳 Vue-i18n project has completed plug-in configuration, and has not completed variable compilation
😭 Bug It must be necessary
🟡 To be supplemented...
Open the project in Gitpod (a free online development environment for GitHub) and start coding immediately
- node-git-pnpm - Project development environment
- Vite - be familiar with
vitecharacteristic - Vue3 - be familiar with
VueBasic Grammar - Pinia -
PiniaChinese documents - TypeScript - be familiar with
TypeScriptBasic Grammar - Es6+ - be familiar with es6 Basic Grammar
- Vue-Router-Next - be familiar with
vue-routerBasic use - Naive UI - ui Basic use
- Mock.js - mockjs Official website
- Get project code
git clone https://github.com/vzane0904/v-naive-admin.git- Initialize git commitizen
cd ./v-naive-admin
pnpm install -g commitizen- Installation Dependencies
pnpm install
- run
pnpm dev- build
pnpm build- VNaive-admin - Full version
You are very welcome to join Mention one Issue Or submit a Pull Request。
Pull Request:
- Fork code!
- Create your own branch:
git checkout -b feat/xxxx - Submit your changes:
git commit -am 'feat(function): add xxxxx' - Push your branch:
git push origin feat/xxxx - Submit
pull request
-
Using git cz instead of git commit, the project has built-in husky, which will check the code specification when submitting the code
-
featAdd new functions -
fixFix the problem / BUG -
refactorrestructure -
docsDocumentation/Notes -
resouResource changes (add or delete src/assets resources) -
styleThe code style does not affect the running results -
perfOptimization/performance improvement -
testTest related -
buildConstruction process and external dependency changes (such as upgrading the npm package and modifying the webpack configuration) -
ciContinuous integration -
choreDependent update/scaffold configuration modification, etc -
revertUndo Modification
Chrome >= 87Firefox >= 78Safari >= 13Edge >= 88
Support modern browsers, not IE
 IE |
 Edge |
 Firefox |
 Chrome |
 Safari |
|---|---|---|---|---|
| not support | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
If these plug-ins are helpful to you, they can be supported by a star
- vite-plugin-mock - Used for local and development environment data mock
- vite-plugin-html - Used for html template conversion and compression
- vite-plugin-style-import - Used for component library style import on demand
- vite-plugin-theme - Used to switch color related configurations such as theme color online
- vite-plugin-imagemin - Used to package compressed image resources
- vite-plugin-compression - Used for packaging output. gz | Brotil file
- vite-plugin-svg-icons - Used to quickly generate svg sprite map
- unplugin-vue-components/vite - Automatically importing plug-ins saves a lot of import statements from the UI library
- unplugin-auto-import/vite - Auto import plug-in Api saves a lot of import statements of UI library
- rollup-plugin-visualizer - Rollup Packaging Volume Analysis Plug in
V-Naive-Admin It is a completely open source and free project, which helps developers develop medium and large management systems more easily, and also provides QQ communication group usage questions. Welcome to ask questions in the group.
-
QQ group
None
This project can be used for commercial purposes free of charge. Please abide by the MIT agreement and retain the author's technical support statement.