# elysia **Repository Path**: Sabermisaka/elysia ## Basic Information - **Project Name**: elysia - **Description**: 低代码表单设计器 - **Primary Language**: JavaScript - **License**: Apache-2.0 - **Default Branch**: main - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 1 - **Created**: 2023-04-10 - **Last Updated**: 2024-06-10 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # Elysia Form 基于**Vue3**、**Ant Design of Vue**、**Vite**的可视化设计低代码表单 ### 在线预览 [在线Demo](https://arutoriacode.github.io/elysia) ### 功能一览 - [x] 拖拽式可视化表单设计 - [x] 支持用户自定义代码来控制组件 - [x] 支持自定义CSS样式 - [x] 支持自定义校验逻辑 - [x] 支持开发自定义组件 - [x] 支持响应式自适应布局 ### 项目结构 ``` elysia ├── public ├── src │ ├── assets │ ├── builds-render # 渲染器 │ ├── components │ ├── designer # 设计器 │ ├── extension # 开展组件 │ ├── hooks │ ├── utils │ ├── App.vue │ ├── demo.json │ ├── main.js │ └── style.less ├── LICENSE ├── README.md ├── index.html ├── install-builds.js ├── jsconfig.json ├── package.json ├── vite-render-lib.config.js └── vite.config.js ``` ### 安装依赖 ```shell npm install ``` ### 本地调试 ```shell npm run dev ``` ### 打包 支持打包为库调用(仅渲染器) ```shell npm run build:render ``` 使用 ```javascript // main.js import { createApp } from "vue"; import App from "./App.vue"; import antd from "ant-design-vue"; import 'ant-design-vue/dist/antd.css'; import ElysiaBuildsRender from "./libs/render.es.js"; createApp(App).use(antd).use(ElysiaBuildsRender).mount("#app"); ``` ```vue // xxx.vue ``` ### 浏览器兼容性 不支持IE 11(包括)以下的浏览器 ### 开发自定义组件 在 **src/extension** 下有个 github 自定义组件可以参考 同时还需要在渲染器**builds-render**目录下有对应的渲染组件 **需要注意** 不管设计器还是渲染器的组件都采用了`