1. Project Overview

Vue3-Antd-Plus

Modern Management System Based on Vue3 + js [Full Version]

Vue3-Antd-Plus is a modern management system that provides a comprehensive collection of feature-rich components and tools, helping developers quickly build and develop administration applications.

A Complete Solution for Management Backend + Web Frontend + Node Backend, Built with Vue 3 + JavaScript + Pinia + Vite + Ant Design Vue

The main reason for creating this project: Most Vue3 projects available online use TypeScript, so I decided to create a JavaScript version for everyone to use.

2. Open Source License

Licensed under MIT

3. Screenshots

Screenshots (Management Backend + Web Frontend)

4. Feature Overview

Features:

• Frontend - Overall framework has been set up
• Frontend - APIs have been integrated
• Frontend - Global unified error handling with axios
• Admin - Large-screen data visualization
• Admin - Integration of various rich-text editors
• Admin - Custom themes, menu permissions, and button permissions
• Admin - Login, registration, menus, top-level tabs navigation, and global menu search
• Admin - User management, role management, permission management, and permission checks using custom directives
• Admin - User operation logs, project code generator (frontend and backend code files), and icon selector
• Admin - Unified error handling
• Admin - Table import, export, and download
• Admin - Image, file, and audio upload, download, preview, and more
• Server - Clear project structure
• Server - Integrated email delivery, scheduled tasks, and a unified response data format
• Server - JWT authentication, API data permission validation, and role permission verification
• Server - Unified parameter validation with express-validator
• Server - API logging, table parsing, and more

Functional characteristics

• Built with Vue 3 and Vite, providing an efficient development experience and excellent performance.
• Integrates the Ant Design Vue component library, providing an attractive UI and a rich selection of components, along with theme switching.
• Uses Vue Router for route management, supporting nested routes and dynamic routing.
• Uses Axios to handle HTTP requests and communicate with the backend.
• Integrates the ECharts charting library for data statistics and visualization.
• Uses Pinia for state management, providing a reactive data flow solution.
• Integrates the Tinymce rich-text editor and Vditor Markdown editor to meet different editing requirements.
• Provides keyboard shortcut support using hotkeys-js to enhance the user experience
• Uses Lodash to provide commonly used utility functions and simplify the development process
• Integrates the testing tools @vue/test-utils and vitest for convenient unit testing
• More....

5. Tech Stack

Quick Start

1. Clone this repository to your local machine
2. Access to One Flying Open-source: https://code.exmay.com/ Download
3. Install dependencies for admin/client/server
4. npm install
5. Start admin/client/server locally
6. npm run dev
7. Build for production
8. npm run build

Add a route page in admin

/**
 * Display within the main framework
 * Route configuration instructions
 * {
      path: '/dir-demo-info',    // Page URL (unique)
      name: 'dir-demo-info',     // Page name (unique)
      hidden: false,              // Hidden (not displayed in the sidebar menu)
      meta: {
          title: 'User Management',       // Page title
          icon: 'yonghuguanli',  // Page icon
          cache: true,          // Whether to cache the page. Default: true
          link: false,           // Whether the page is an external link. Default: false
          frameSrc: false,       // Whether the page is embedded. Default: false
          requiresAuth: true,   // Whether login is required. Default: true
          perms: [               // List of page operation permissions
              'sys:user:list',   // Query
              'sys:user:create', // Create
              'sys:user:update', // Update
              'sys:user:delete', // Delete
          ],
      },
      component: () => import('@/views/sys/user/dir-user-info.vue'),
   }
 *
 */

....