Tailwind Resources Logo Tailwind Resources
Vue Admin screenshot

Vue Admin

Author Avatar Theme by Dolphin admin
Updated: 13 Jan 2024
67 Stars

Dolphin Admin Vue is an open source, lightweight, out-of-the-box, elegant and exquisite, internationalized backend management template based on Vue 3 + Vite + Naive UI + TypeScript + TailwindCSS.

Github Live Preview

Categories

Vite Vue Scss

Overview

Dolphin Admin Vue is an open-source, lightweight, and elegant backend management template. It is based on Vue 3, Vite, Naive UI, TypeScript, TailwindCSS, and includes various features for easy development and customization.

Features

  • Vue 3 and Vite: Built on the latest version of Vue and Vite, providing fast and efficient development experience.
  • TypeScript: Use TypeScript for better type checking and improved code quality.
  • Naive UI: Utilize Naive UI, a Vue 3-based UI library, for creating modern and responsive interfaces.
  • TailwindCSS: Implement the TailwindCSS utility-first CSS framework for flexible and customizable styling.
  • pnpm: Use pnpm as the package manager for efficient dependency installation and management.
  • Sass: Take advantage of Sass as the CSS preprocessor for enhanced styling capabilities.
  • Vue Router: Manage routing efficiently with Vue Router for seamless navigation.
  • Pinia: Utilize Pinia for global state management to maintain consistent application state.
  • Axios: Use Axios for making HTTP requests with high encapsulation and ease of use.
  • Vue Use: Access the Vue Use library, a collection of Vue hooks, to enhance functionality and code organization.
  • Vue Use Motion: Incorporate Vue Use Motion for smooth and engaging animation effects.
  • iconify/json and unplugin-icons: Manage icons easily with iconify/json and unplugin-icons for quick and convenient usage.
  • unplugin-auto-import and unplugin-vue-components: Automatically import components, hooks, and utility classes using unplugin-auto-import and unplugin-vue-components, saving development time.
  • vue-i18n: Support internationalization using vue-i18n for creating multilingual applications.
  • ECharts: Utilize ECharts for detailed data visualization and interactive charting capabilities.
  • xlsx: Enable Excel file import and export using xlsx for seamless data management.
  • Socket.IO: Enable real-time communication with Socket.IO for instant updates and notifications.
  • ESLint: Ensure code quality and maintain consistency with ESLint for code checking.
  • Prettier: Format code automatically with Prettier to adhere to a defined code style.
  • CSpell: Perform code spelling checking using CSpell to catch any spelling errors.
  • Husky, lint-staged, commitlint, cz-git: Manage Git commit workflow effectively with the help of Husky, lint-staged, commitlint, and cz-git.
  • taze: Simplify dependency version management with taze for streamlined development.
  • Support absolute path import: Easily import files using absolute paths with support for @/ alias.
  • Support third-party login: Enable third-party login integration with platforms like GitHub and Google.
  • Support desktop: Use Tauri for desktop application packaging, providing a native-like experience.
  • TODO: Includes a checklist of tasks to update the template according to your project needs.

Installation

To install Dolphin Admin Vue, follow the instructions below:

  1. Make sure you have Node.js installed with a version greater than or equal to 16.20.1.
  2. Install pnpm globally by running the following command in your terminal:
npm install -g pnpm
  1. Clone the Dolphin Admin Vue repository to your local machine.
git clone <repository-url>
  1. Navigate to the project directory.
cd dolphin-admin-vue
  1. Install dependencies using pnpm.
pnpm install

  1. Configure environment variables by creating a .env file based on the .env.example file provided.

  2. Modify the necessary information in the project files such as README.md, LICENSE, package.json, index.html, favicon.ico, and src/app.config.ts based on your project requirements.

Summary

Dolphin Admin Vue is an open-source backend management template built on Vue 3, Vite, Naive UI, TypeScript, and TailwindCSS. It offers a comprehensive set of features such as global state management, routing, HTTP requests, animation, internationalization, data visualization, file import/export, real-time communication, code checking, formatting, and more. With its lightweight and customizable nature, it provides an elegant solution for building efficient and modern admin panels.