V Naive Admin

English | 中文

brief introduction

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.

security

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.

characteristic

• 🎉 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

Online preview

• V-Naive-Admin - Full Chinese website

Test account: Admin / Pass123456!

Completed

✅ 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 🤭)

To be completed

🔳 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...

use Gitpod

Open the project in Gitpod (a free online development environment for GitHub) and start coding immediately

docs

Document address

prepare

• node-git-pnpm - Project development environment
• Vite - be familiar with vite characteristic
• Vue3 - be familiar with Vue Basic Grammar
• Pinia - Pinia Chinese documents
• TypeScript - be familiar with TypeScript Basic Grammar
• Es6+ - be familiar with es6 Basic Grammar
• Vue-Router-Next - be familiar with vue-router Basic use
• Naive UI - ui Basic use
• Mock.js - mockjs Official website

Installation and use

• 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

Update Log

CHANGELOG

Project address

• VNaive-admin - Full version

How to contribute

You are very welcome to join Mention one Issue Or submit a Pull Request。

Pull Request:

1. Fork code!
2. Create your own branch: git checkout -b feat/xxxx
3. Submit your changes: git commit -am 'feat(function): add xxxxx'
4. Push your branch: git push origin feat/xxxx
5. Submit pull request

Git Contribution submission specification

• reference resources vue standard (Angular)

• Using git cz instead of git commit, the project has built-in husky, which will check the code specification when submitting the code

• feat Add new functions

• fix Fix the problem / BUG

• refactor restructure

• docs Documentation/Notes

• resou Resource changes (add or delete src/assets resources)

• style The code style does not affect the running results

• perf Optimization/performance improvement

• test Test related

• build Construction process and external dependency changes (such as upgrading the npm package and modifying the webpack configuration)

• ci Continuous integration

• chore Dependent update/scaffold configuration modification, etc

• revert Undo Modification

Browser support

• Chrome >= 87
• Firefox >= 78
• Safari >= 13
• Edge >= 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

Relevant warehouse

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

Maintainer

@zane0904

communication

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.

• GitHub discussions

• QQ group None

License

MIT © VNaive-20222

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.