Dolphin Admin Vue

English / 简体中文

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.

Features

• [x] Based on Vue 3, Vite
• [x] TypeScript, of course
• [x] Naive UI, a Vue 3-based UI library
• [x] TailwindCSS, a utility-first CSS framework
• [x] pnpm as package manager
• [x] Sass as CSS preprocessor
• [x] Vue Router for routing management
• [x] Pinia for global state management
• [x] Axios for request, and highly encapsulated
• [x] Vue Use as Vue Hook library
• [x] Vue Use Motion for animation
• [x] iconify/json and unplugin-icons for icon management, you can use icones to use it quickly
• [x] unplugin-auto-import and unplugin-vue-components for automatic import of components, hooks, and utility classes, freeing your hands
• [x] vue-i18n, support internationalization
• [x] ECharts for data visualization
• [x] xlsx for Excel file import and export
• [x] Socket.IO for real-time communication
• [x] ESLint for code checking
• [x] Prettier for code formatting
• [x] CSpell for code spelling checking
• [x] Husky, lint-staged, commitlint, cz-git for Git commit management
• [x] taze for dependency version management
• [x] Support absolute path import, use @/*
• [x] Support third-party login like GitHub, Google, etc.
• [x] Support desktop, use Tauri for desktop application packaging
• [x] ~~Deploy on Vercel, zero configuration~~ (Vercel does not support WebSocket, please deploy byself)

TODO

• [ ] Use Docker and Docker Compose for containerization

Tech Stack

• Vue 3
• TypeScript
• Vite
• Naive UI
• Sass

Code Style

• Airbnb JavaScript Style Guide
• Dev Standard

Getting Started

Checklist

When using this template, please try to update your own information correctly according to the checklist:

• [ ] Organize README.md
• [ ] Modify the author name in LICENSE
• [ ] Modify the project name, description, author and other information in package.json
• [ ] Modify the environment variables in .env
• [ ] Modify the site metadata in index.html
• [ ] Change favicon.ico in the /public directory
• [ ] Modify the app metadata in /src/app.config.ts

Usage

Environment

• Node.js >=16.20.1
• pnpm

Configuration Environment Variables

Configure .env file, refer to .env.example.

PC App

Installation

pnpm i

Development

pnpm web:dev

Build

pnpm web:build

Desktop App

Development

pnpm desktop:dev

Deploy

Go to Vercel and select your Git repository, choose Vite as template, add production environment variables, and click deploy.

License

MIT License © 2023 Bruce Song from Bit Ocean