Vue Templates Logo Vue Templates
Clover Admin Vue screenshot

Clover Admin Vue

Author Avatar Theme by Wzc520pyfm
Updated: 21 Dec 2024
190 Stars

A admin template, use the latest technology, based on Vue3,Vite3,Typescript,Pinia,Unocss,Element-plus,pnpm [一个基于Vue3，Vite3，Typescript，Pinia，Unocss，Element-plus，pnpm，使用最新技术栈的的中后台模板]

Github Live Preview

Categories

Vite Less Scss Dashboard

Overview

The clover-admin-vue is a Vue 3, Vite 3, TypeScript, Pinia, Unocss, Element-plus, pnpm-powered admin template for middle and back-end projects. It is designed to be user-friendly, customizable, and versatile.

Features

  • Vue 3, Vite 3: Utilizes the latest version of Vue and Vite for enhanced performance and productivity.
  • TypeScript: Supports type checking and provides better tooling for the development process.
  • Pinia: Integrates Pinia as a state management solution for the application.
  • Unocss: Utilizes Unocss for utility CSS classes, allowing for more efficient styling.
  • Element-plus: Includes the Element-plus UI library for building the user interface.
  • pnpm: Uses pnpm as the package manager for a faster and more efficient installation process.

Installation

To install the clover-admin-vue theme, follow these steps:

  1. Recommended IDE Setup:

    • Install Visual Studio Code (VSCode).
    • Install the Volar extension and disable the Vetur extension.
    • Install the TypeScript Vue Plugin (Volar).

  2. Type Support for .vue Imports in TS:

    • By default, TypeScript cannot handle type information for .vue imports.
    • Replace the tsc CLI with vue-tsc for type checking.
    • Install the TypeScript Vue Plugin (Volar) in your editor to make TypeScript aware of .vue types.

  3. Customize Configuration:

    • Refer to the Vite Configuration Reference for customizing the configuration of the project.

  4. Project Setup:

    • Compile and Hot-Reload for Development.
    • Type-Check, Compile, and Minify for Production.
    • Run Unit Tests with Vitest.
    • Run End-to-End Tests with Cypress.

  5. Lint with ESLint.

  6. Docker Deployment:

    • Build the Docker image using the provided Dockerfile.
    • Create and start a Docker container with the built image.
    • Access CloverAdmin in a browser at http://localhost.

  7. If Docker is not installed, follow these steps to install Docker on Ubuntu 20.04:

    • Update the package index and install necessary dependencies.
    • Add a new HTTPS software source for Docker.
    • Import the GPG key for the source repository.
    • Add the Docker APT software source.
    • Install the latest version of Docker.
    • Install a specific version of Docker if needed.

  8. Project Configuration and Directory Structure:

    • If the project root directory feels overwhelming, enable the file nesting feature in VSCode (fileNesting.enabled).
    • Use recommended plugins like antfu.file-nesting for a better file organization experience.

  9. Consistent Development Experience:

    • Project-level VSCode configurations, extensions, and settings are provided.
    • Automatic import and registration of Vue components using the <script lang='ts' setup> or <script lang='ts'> syntax.

Summary

The clover-admin-vue is a Vue 3 admin template that combines the power of Vue 3, Vite 3, TypeScript, Pinia, Unocss, Element-plus, and pnpm. It offers a user-friendly development experience, flexibility in configuration, and various features to enhance productivity. The installation process involves setting up the recommended IDE, customizing the configuration, and utilizing Docker for deployment. The theme also provides tooling and plugins to ensure a consistent development experience and simplify component registration. Overall, it is a versatile and modern solution for middle and back-end projects.