vue-admin-box: Vue3、Element Plus、typescript后台管理系统

English | 简体中文

summary

• update version
• After more than three months of iteration, version 1.0 was officially released on August 10, 2021, with four basic templates attached for everyone to use
• This open source project is developed by individuals and does not restrict any commercial use or personal research. Please click star to encourage me before using it
• All illegal and pornographic activities involved in this open source project have nothing to do with this source code. Please do not show yourself
• QQ communication group：912804007，Problems are raised in the group and can be solved in time

Preview

if you are not in China, maybe you should download the project to show the demo or use a vpn to visit the online demo.

• demo China
• demo World
• github address
• gitee address
• It is recommended to use yarn or cnpm for installation in China. NPM installation is prone to problems

Basic Template

There are four basic templates, which are suitable for zero development and use, and can be found in github、gitee View directly in the warehouse，The template is shown below:

1. template-ts-i18n template，container ts and internationalization github gitee demo
2. template-ts template，container ts，internationalization is not container github gitee demo
3. template-js-i18n template，container js and internationalization github gitee demo
4. template-js template，container js，internationalization is not container github gitee demo

Introduction

vue-admin-box is a free and open source background management system template。The latest vue-next, vite, element-plus used in this project. The purpose is to solve the complex configuration of background system in general business。

Characteristic function

• Routing configuration, state management mechanism (State supports local storage by default), encapsulated and perfect Axios and API management mechanism suitable for middle and background development
• It is very convenient to expand the theme configuration function, and supports three typical middle and background styles by default
• Routing configuration, state management mechanism (State supports local storage by default), encapsulated and perfect Axios and API management mechanism suitable for middle and background development
• For the three typical business tables of adding, deleting and modifying query, please see "CRUD table", "category table" and "tree table" in the "page column" for details
• The refresh function without route jump supports cache page refresh. At present, most frameworks do not support cache page refresh
• It is a convenient and extensible internationalization solution, and provides two sets of non internationalized basic templates and two sets of internationalized basic templates (TS version / JS version)
• Handwritten versions of various custom instructions
• For table common components and pop-up common components that have been verified by multiple middle and background businesses, please see "crud table", "category table" and "tree table" in the "page column" for details

i18n fast

install extension in vscode: i18n Ally(https://marketplace.visualstudio.com/items/?itemName=Lokalise.i18n-ally) for show real word in codes and translate faster.

Main technology

• MVVM framework：vue v3
• Engineering Management：vite v2
• UI framework：element-plus
• Router manage：vue-router v4
• State Manage ：vuex v4
• Data request：axios
• Utility library：@vueuse/core

How to use

1. get the source code project

   git clone https://github.com/cmdparkour/vue-admin-box.git
   

2. install dependence, you can use cnpm or yarn in China

   npm install
   

3. run in the development

   npm run dev 或 npm run start
   

4. build in production

   npm run build
   

Partner project

• Thinker-Admin-Box - springboot with vue-admin-box, use java code to generate vue page
• H5-dooring - a low code project about the mobile website
• ant-simple-pro - a middle website based on Vue3.0, react and angular
• vue-vben-admin - a modern vue admin. It is based on Vue3, vite and TypeScript. It's fast！

preview