doraemonxxx / vue-vben-admin

A modern vue admin. It is based on Vue3, vite and TypeScript. It's fast！

Vue vben admin

English | 中文

Introduction

Vue Vben Admin is a free and open source middle platform/back-end template. Using the latest vue3, vite4, TypeScript and other mainstream technology, Vben is the out-of-the-box front-end solution for both production and learning purpose.

Features

• State-of-art Techinical Stack：Using the latest and popular front-end technology such as Vue3/vite2
• TypeScript: Application-level JavaScript language
• Theming: Configurable themes
• International：Built-in i18n support
• Response Mock: Built-in response mock ability
• Authority: Built-in permission system based on dynamic routes.
• Component: Extracted and encapsulated components for various scenarios.

Preview

• vue-vben-admin - Full version (Chinese)
• vue-vben-admin-gh-pages - Full version (github hosted)
• vben-admin-thin-next - Simplified Version (Chinese)
• vben-admin-thin-gh-pages -Simplified Version (github hosted)

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

• Install dependencies

cd vue-vben-admin

pnpm install

• run

pnpm serve

• build

pnpm build

• docker

The dockerFile is located in the project root directory and supports differential deployment

build image

docker build -t vue-vben-admin .

Use environment variables to achieve differentiated container deployment. Specify service endpoint by assigning VG_BASE_URL. In the following example, http://localhost:3333 is used as the back-end service address and the container is mapped to port 6666:

docker run --name vue-vben-admin -d -p 6666:80  -e VG_BASE_URL=http://localhost:3333 vue-vben-admin

Then you can navigate to http://localhost:6666

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:

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. submitpull request

Git Contribution submission specification

• reference vue specification (Angular)

  • feat Add new features
  • fix Fix the problem/BUG
  • style Modify the code style/format that does not affect the feature
  • 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 show support by leaving 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-compression - Used to pack input .gz|.brotil files
• vite-plugin-svg-icons - Used to quickly generate svg sprite

Browser support

The Chrome 80+ browser is recommended for local development

Support modern browsers, doesn't include IE

IE	Edge	Firefox	Chrome	Safari
not support	last 2 versions	last 2 versions	last 2 versions	last 2 versions

Maintainer

@Vben @Jinmao

Thanks

Star History Chart

License

MIT © Vben-2020