Overview

Vue Vben Admin is a free and open source middle and back-end template that is built using the latest technologies such as Vue3, Vite4, and TypeScript. It provides out-of-the-box solutions for middle and back-end front-end development and can also be used for learning reference.

Features

• State of the Art Development: Uses front-end technologies such as Vue3 and Vite2
• TypeScript: Built with application-level JavaScript language
• Theming: Configurable themes
• Internationalization: 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

Installation

To install Vue Vben Admin, follow these steps:

1. Clone the project code from the repository.
2. Install the required dependencies.
3. Build the project.
4. Run the Docker container.

Here is the code snippet for installing the dependencies:

npm install

To build the project, run the following command:

npm run build

To run the Docker container, use the Dockerfile located in the project root directory. Set the VG_BASE_URL environment variable to point to the desired back-end service address. For example, if the back-end service address is http://localhost:3333, and you want to map the container to port 6666, use the following command:

docker build -t vben-admin .
docker run -d -p 6666:80 -e VG_BASE_URL=http://localhost:3333 vben-admin

Lastly, you can access the application by navigating to http://localhost:6666 in your browser.

Summary

Vue Vben Admin is a powerful middle and back-end template built using the latest technologies. It provides a wide range of features such as state-of-the-art development tools, theming options, internationalization support, mock data server, and dynamic routing permission generation. Installing the template is easy with the provided code snippets. Overall, Vue Vben Admin is a great choice for anyone looking for a comprehensive solution for their middle and back-end front-end development needs.