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

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:

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

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

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.