Vue Admin

Overview:

Dolphin Admin Web is an open-source backend management template based on Vue 3, Vite, and Naive UI. It is lightweight, elegant, and internationalized, making it suitable for a variety of web applications. The template includes various features such as Vue Router for routing management, Pinia for global state management, Axios for API requests, and ECharts for data visualization. Additionally, it supports internationalization, Excel file import/export, real-time communication with socket.io, and third-party login integration. The template also provides tools for code checking, formatting, and spelling checking. It can be easily deployed on Vercel with zero configuration.

Features:

• Based on Vue 3, Vite: Utilizes the latest versions of Vue and Vite for optimal performance and development experience.
• Naive UI: Uses Naive UI, a Vue 3-based UI library, for a visually appealing and user-friendly interface.
• TailwindCSS: Implements TailwindCSS, a utility-first CSS framework, for flexible and customizable styling options.
• Global State Management: Utilizes Pinia for managing global application state efficiently.
• API Request Handling: Includes Axios for making HTTP requests with high encapsulation.
• Icon Management: Features iconify/json and unplugin-icons for easy integration and usage of icons.
• Automatic Import: Uses unplugin-auto-import and unplugin-vue-components for seamless automatic import of components, hooks, and utility classes.
• Internationalization: Supports multiple languages with vue-i18n for easy localization of the application.
• Data Visualization: Integrates ECharts for visually appealing and interactive data visualization.
• Excel Import/Export: Provides support for importing and exporting Excel files using the xlsx library.
• Real-time Communication: Supports real-time communication with the integration of socket.io.
• Code Quality: Includes ESLint for code checking, Prettier for code formatting, and CSpell for code spelling checking.
• Git Commit Management: Utilizes Husky, lint-staged, commitlint, and cz-git for managing Git commits.
• Absolute Path Import: Supports absolute path import using the “@” symbol.
• Third-party Login: Allows integration with third-party login providers like GitHub and Google.
• Desktop App Support: Supports desktop application packaging using Tauri.
• Deployment: Can be easily deployed on Vercel with zero configuration.

Installation:

To install Dolphin Admin Web, follow these steps:

1. Ensure that you have Node.js version 16.14.0 or higher and pnpm installed on your system.

2. Configure the environment variables by creating a .env file. You can refer to the provided .env.example file for the required variables.

3. Clone the Git repository of Dolphin Admin Web.

4. In the cloned repository, update the following information:

   • Organize the README.md file.
   • Modify the author name in LICENSE.
   • Update the project name, description, author, and other details in package.json.
   • Modify the site metadata in index.html.
   • Change the favicon.ico file in the /public directory.
   • Modify the app metadata in /src/app.config.ts.

5. Run the following command to install the dependencies:

   pnpm install
   

6. To start the development server, use the following command:

   pnpm run dev
   

7. To build the project for production, run:

   pnpm run build
   

8. For desktop app development, install Tauri and follow the instructions specific to desktop app development provided by Dolphin Admin Web.

9. For deployment, go to Vercel and select your Git repository. Choose Vite as the template, add production environment variables, and click deploy.

Summary:

Dolphin Admin Web is an open-source backend management template that provides a lightweight and elegant solution for building web applications. With its integration of modern technologies like Vue 3, Vite, and Naive UI, it offers an expressive and powerful development environment. The template includes a rich set of features such as API request handling, global state management, data visualization, and internationalization. It also supports desktop application packaging and deployment on Vercel. Dolphin Admin Web’s comprehensive tooling for code quality and Git commit management ensures a smooth development workflow. By following the installation guide, users can quickly set up and customize Dolphin Admin Web for their own projects.