DOCSEARCHbyAlgolia
Submit Docs

RuoYi-Vue3 Documentation

repository·master·Indexed 27 days ago

https://github.com/yangzongzhuan/ruoyi-vue3

A rapid development framework for enterprise-level applications based on SpringBoot and Vue 3. It features a decoupled frontend and backend architecture using Element Plus, Vite, Pinia, and Vue Router 4. Built-in modules include user, role, and menu management, code generation, system monitoring, and a rich set of UI components such as a Crontab expression selector and a Quill-based rich text editor.

Tokens
7.1K
Snippets
4
Records
82
Agent score
92%

What's inside RuoYi-Vue3

  1. Overview of RuoYi-Vue3 technology stack

    master

    RuoYi-Vue3 is a fast development framework based on SpringBoot and Vue3. The frontend stack includes:

    • Framework: Vue 3
    • UI Library: Element Plus
    • Build Tool: Vite
    • State Management: Pinia
    • Routing: Vue Router 4
    • Scripting: JavaScript

  2. Run the RuoYi-Vue3 frontend

    master

    Follow these steps to set up and run the RuoYi-Vue3 frontend locally:

    1. Clone the project: Use git to clone the repository.
    2. Enter the directory: Navigate into the cloned folder.
    3. Install dependencies: Use yarn with the specified registry to ensure correct package retrieval.
    4. Start the service: Run the development server.

    Default access address: http://localhost:80

    # 克隆项目
git clone https://github.com/yangzongzhuan/RuoYi-Vue3.git

# 进入项目目录
cd RuoYi-Vue3

# 安装依赖
yarn --registry=https://registry.npmmirror.com

# 启动服务
yarn dev

  3. Configure Editor image upload behavior

    master

    When type='url' is used, the component automatically handles image uploads via the /common/upload endpoint.

    Image Upload Workflow

    1. Toolbar Click: Clicking the image icon in the toolbar triggers a hidden file uploader.
    2. Paste Support: Pasting an image directly into the editor triggers an automatic upload.
    3. Validation: The component validates that the file is an image (jpeg, jpg, png, or svg) and checks if the size is within the fileSize limit.
    4. Insertion: Upon successful upload, the server's returned file name is appended to the VITE_APP_BASE_API base URL and inserted into the editor at the current cursor position.

  4. Use the FileUpload component

    master

    The FileUpload component is a Vue 3 component designed for uploading files with built-in validation for file size, file type, and file count. It supports drag-and-drop reordering and integrates with v-model to manage a comma-separated string of file URLs or an array of file objects.

    Key Features

    • Automatic Validation: Checks file extensions and size (in MB) before uploading.
    • v-model Support: Syncs the file list back to the parent component as a comma-separated string of URLs.
    • Drag-and-Drop Reordering: Allows users to reorder the uploaded file list.
    • Customizable Upload Endpoint: Defaults to /common/upload.
    • Display Modes: Can be set to disabled mode for read-only viewing.

  6. Install and use global plugins in RuoYi-Vue3

    master
    The installPlugins function registers several global utility objects to the Vue application instance via app.config.globalProperties. Once installed, these utilities are accessible within your Vue components using this.$tab, this.$auth, this.$cache, this.$modal, and this.$download.

  8. Use the DictTag component to display dictionary tags

    master

    The DictTag component is used to render visual tags (using Element Plus el-tag or plain spans) based on a provided list of dictionary options. It matches a given value (which can be a single value or a delimited string/array) against the options array and displays the corresponding labels.

    Props

    PropTypeDefaultDescription
    optionsArraynullAn array of objects containing dictionary data. Each object should ideally have value, label, elTagType, and elTagClass properties.
    valueNumber, String, Array-The current value(s) to be matched against the options.
    showValueBooleantrueIf true, any values in value that do not find a match in options will be displayed as plain text.
    separatorString`

  9. Built-in features of RuoYi-Vue3

    master

    The system includes several built-in management modules:

    • User/Department/Post Management: Configure users, organizational structures (departments/groups), and job positions.
    • Menu/Role Management: Configure system menus, operation permissions, button identifiers, and data scope permissions.
    • Dictionary/Parameter Management: Maintain fixed data sets and dynamic system configuration parameters.
    • Logs & Monitoring: Track operation logs, login logs, online users, and monitor system resources (CPU, memory, disk, etc.).
    • Task & Cache Management: Schedule online tasks and monitor system cache information.
    • Code Generation: Automatically generate frontend and backend code (Java, HTML, XML, SQL) including CRUD support.
    • System Interface: Automatically generate API documentation based on business code.
    • Online Builder: Drag-and-drop form elements to generate HTML code.
    • Connection Pool Monitoring: Monitor database connection pool status to identify SQL performance bottlenecks.

  12. ImagePreview component props

    master

    The ImagePreview component accepts the following props:

    PropTypeDefaultDescription
    srcString""The image URL or a comma-separated list of image URLs. Local paths are automatically prefixed with VITE_APP_BASE_API.
    width[Number, String]""The width of the image. If a number is provided, it is treated as pixels (e.g., 200 becomes 200px).
    height[Number, String]""The height of the image. If a number is provided, it is treated as pixels (e.g., 200 becomes 200px).