RuoYi-Vue Documentation

RuoYi-Vue is an open-source rapid development framework based on a Spring Boot and Vue frontend-backend separation architecture. It is designed for high-efficiency development and provides a complete set of management features out of the box.

Core Technology Stack:

• Frontend: Vue, Element UI
• Backend: Spring Boot, Spring Security, Redis, and JWT
• Authentication: JWT (supports multi-terminal authentication)
• Permissions: Supports dynamic permission menus and multiple methods of access control.
• Code Generation: Includes a code generator to automatically produce both frontend and backend code (Java, HTML, XML, SQL) for CRUD operations.

RuoYi-Vue comes with several built-in modules for system management and monitoring:

• User & Organization Management: User management, Department management (tree structure with data permissions), and Post management.
• Access Control: Menu management (permissions/button identifiers), Role management (data scope partitioning), and Dictionary management.
• System Configuration: Parameter management and Notification/Announcement management.
• Logging & Monitoring: Operation logs, Login logs, Online user monitoring, Service monitoring (CPU, Memory, Disk, Stack), Cache monitoring, and Connection pool monitoring (SQL performance analysis).
• Task & Automation: Scheduled tasks (with execution logs), Code generation (CRUD support), and System API documentation generation.
• Utilities: Online builder (HTML generation via drag-and-drop form elements).

To set up the local development environment for the ruoyi-ui project, clone the repository, install dependencies using npm, and start the development server.

Note on dependency installation: It is recommended to avoid using cnpm as it may cause unexpected bugs. If npm is slow, use the official npmmirror registry instead.

The backend project maintains multiple parallel branches based on Spring Boot versions. Choose the branch that matches your required JDK and Spring Boot version:

Use the following commands to build the project for different deployment environments:

• Staging Environment: Use npm run build:stage to generate builds for testing/staging.
• Production Environment: Use npm run build:prod to generate optimized builds for production.

Once the development server is running via npm run dev, you can access the application in your web browser at:

http://localhost:80

You can test the live environment and view documentation at the following addresses:

• Demo URL: http://vue.ruoyi.vip
• Documentation URL: http://doc.ruoyi.vip
• Default Credentials:
  • Username: admin
  • Password: admin123

The frontend project offers several versions depending on your preference for Vue versions, scripting languages, and build tools. You can mix and match these with the corresponding backend branches.

To use the built-in custom directives in your Vue application, import the default export and call the install function, passing your Vue instance. This registers the following directives globally:

• v-hasRole: Permission control based on user roles.
• v-hasPermi: Permission control based on specific permissions.
• v-clipboard: Facilitates clipboard operations.
• v-dialogDrag: Enables dragging for dialog components.
• v-dialogDragWidth: Enables resizing the width of dialog components.
• v-dialogDragHeight: Enables resizing the height of dialog components.

The ThemePicker component provides a UI interface (using el-color-picker) that allows users to select a new primary color for the application. When a color is selected, the component dynamically updates the application's CSS styles by calculating a color cluster (tints and shades) and replacing existing color values in the document's style tags. It also fetches the base theme-chalk CSS to ensure consistency.

Key behaviors:

• Automatic Updates: It watches the theme value and triggers setTheme automatically.
• State Integration: It reads the initial theme from the Vuex store at this.$store.state.settings.theme.
• Event Emission: Emits a change event with the new color value when the theme is updated.

<template>
  <ThemePicker />
</template>