Vue vben admin

English | 中文

Introduction

Vue Vben Admin is a free and open source middle and back-end template. Using the latest vue3, vite2, TypeScript and other mainstream technology development, the out-of-the-box middle and back-end front-end solutions can also be used for learning reference.

Feature

State of The Art Development：Use front-end front-end technology development such as Vue3/vite2
TypeScript: Application-level JavaScript language
Theming: Configurable themes
International：Built-in complete internationalization program
Mock Server Built-in mock data scheme
Authority Built-in complete dynamic routing permission generation scheme.
Component Multiple commonly used components are encapsulated twice

Usage

When you start to use, please modify the items according to the following list first

[] Rename the name field in package.json
[] Change author name in LICENSE
[] Modify favicon.ico in public
[] Modify logo.png in public/resource/ and /src/assets/images/logo.png
[] Modify the relevant project configuration in the .env[xxx] file
[] Adjust to suit your own project style in src/settings/projectSetting.ts

Note

Dependency deleted echarts, apexcharts, xlsx, vditor. But the components and code are not deleted. When you have not referenced the relevant components, no error will be issued. When you need to use it, just execute the corresponding command to install the corresponding module

Which one needs to be used will execute the corresponding command

yarn add echarts

yarn add apexcharts

预览

vue-vben-admin - Full version Chinese site
vue-vben-admin-gh-pages - Full version of the github site
vben-admin-thin-next - Simplified Chinese site
vben-admin-thin-gh-pages -Simplified github site

Test account: vben/123456

Use Gitpod

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

Documentation

Document

Preparation

node and git - Project development environment
Vite - Familiar with vite features
Vue3 - Familiar with Vue basic syntax
TypeScript - Familiar with the basic syntax of TypeScript
Es6+ - Familiar with es6 basic syntax
Vue-Router-Next - Familiar with the basic use of vue-router
Ant-Design-Vue - ui basic use
Mock.js - mockjs basic syntax

Install and use

Get the project code

git clone https://github.com/anncwb/vue-vben-admin.git

Installation dependencies

cd vue-vben-admin

yarn install

yarn serve

build

yarn build

Change Log

CHANGELOG

Project

vue-vben-admin - full version
vue-vben-admin-thin-next - Simplified version

How to contribute

You are very welcome to join！Raise an 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
submitpull request

Git Contribution submission specification

reference vue specification (Angular)
- feat Add new features
- fix Fix the problem/BUG
- style The code style is related and does not affect the running result
- perf Optimization/performance improvement
- refactor Refactor
- revert Undo edit
- test Test related
- docs Documentation/notes
- chore Dependency update/scaffolding configuration modification etc.
- workflow Workflow improvements
- ci Continuous integration
- types Type definition file changes
- wip In development

Related warehouse

If these plugins are helpful to you, you can give a star support

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 introduction on demand
vite-plugin-theme - Used to pack compressed image resources
vite-plugin-imagemin - Used for online switching of theme colors and other color-related configurations
vite-plugin-compression - Used to pack input .gz|.brotil files
vite-plugin-svg-icons - Used to quickly generate svg sprite