DOCSEARCHbyAlgolia
Submit Docs

EpicDesigner Documentation

website·Indexed 31 days ago

https://docs.epicjs.cn

A powerful, out-of-the-box drag-and-drop low-code designer based on Vue 3 and TypeScript. It features multi-UI library compatibility, a plugin system for extending components and sidebars, and includes EBuilder for rendering JSON configurations into pages. Key utilities include pluginManager for managing designer elements and pageManager for interacting with rendered components.

Tokens
12K
Snippets
65
Records
107
Agent score
49%

What's inside EpicDesigner

  1. Overview of EpicDesigner Low-Code Framework

    EpicDesigner is a powerful, out-of-the-box drag-and-drop low-code designer built with Vue 3. It allows developers to create pages visually and export them as JSON configurations, which are then used to render the final pages. The framework is compatible with multiple UI component libraries and supports custom component extensions, property configurations, and event/action mapping.

  2. Overview of EpicDesigner Low-Code Framework

    EpicDesigner is a drag-and-drop low-code designer built with Vue 3. It allows developers to create pages visually and export them as JSON configurations, which are then used to generate actual pages. The framework is compatible with multiple UI component libraries and supports custom component extensions, property configurations, and event/action mapping.

  3. Integrate Element Plus with epic-designer

    To use epic-designer with Element Plus, install the framework dependencies and register the components in your main entry file (main.ts or main.js).
    npm i element-plus @epic-designer/element-plus
    // Import epic-designer styles
import "epic-designer/dist/style.css";

// Import Element Plus styles
import "element-plus/dist/index.css";

import { setupElementPlus } from "@epic-designer/element-plus";
// Register Element UI
setupElementPlus();

  4. Use Iconfont icons in EpicDesigner

    EpicDesigner supports Iconfont icons using the font-class method. This method is compatible with IE8+ and modern browsers, providing intuitive class names for icons. To use Iconfont, first include the generated font-class CSS link in your project, then use the specific icon class in the component configuration.

  5. Implement a custom component extension workflow

    Follow these four steps to fully integrate a custom component into an Epic Designer project:

    1. Create the Component: Build a standard Vue component (e.g., index.vue) with defined props and emits.
    2. Create the Config File: Define the ComponentConfigModel (e.g., index.ts) to map the Vue component to the designer's UI panels.
    3. Create an Extension Entry: Create a setup function (e.g., designer-extensions/index.ts) that calls pluginManager.component.register().
    4. Initialize in App Entry: Call the setup function in your main.ts to ensure the component is registered when the application starts.

  6. Use EBuilder to render pages from JSON

    EBuilder is the page construction component. It takes the JSON configuration generated by EDesigner and transforms it into a functional page by handling component rendering, event binding, and data echoing.

  7. Update UI component dependencies for epic-designer

    When updating the core epic-designer version (specifically noted for versions 1.1.13, 1.1.8, and 1.1.6), you must synchronously update the corresponding UI component library dependencies to ensure compatibility.
    # Update these packages alongside epic-designer
npm install @epic-designer/element-plus @epic-designer/antd @epic-designer/naive-ui

  8. Import and use pluginManager in Epic Designer

    The pluginManager is the central hub for managing components, panels, and public methods within the Epic Designer. It is imported from the epic-designer package.
    import { pluginManager } from 'epic-designer';

  10. Customize EpicDesigner theme using CSS variables

    EpicDesigner provides a set of CSS variables that allow users to override the default styles of the designer interface. To apply custom themes, define the variables in a global CSS file and import that file after the Epic Designer base styles to ensure the overrides take effect.
    /* styles/common-vars.css */
:root {
  --ep-primary: #98f;
}
    // main.ts
import "epic-designer/dist/style.css";
import './styles/common-vars.css';

  11. Access and modify form data using useFormItem

    The useFormItem hook is used within form item components to retrieve the formData context. It leverages dependency injection to provide a reactive formData object, allowing child components to read or update form field values directly.

    Constraints:

    • useFormItem must be called within the scope provided by useForm; otherwise, it returns an empty reactive object.
    • For nested form fields, it is recommended to use getValueByPath and setValueByPath utility functions instead of direct property access.
    <script lang="ts" setup>
import { useFormItem } from 'epic-designer'

const { formData } = useFormItem()

// Read form data
console.log(formData.username)

// Modify form data (triggers view update automatically)
formData.password = 'newPassword'
</script>

  12. Use EDesigner to create page JSON configurations

    EDesigner is the visual designer component. It provides a component library and configuration panels where users can drag components onto a canvas and configure their properties, events, and actions. It includes a real-time preview feature and allows the final design to be exported as a JSON configuration file.