# 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**目录下有对应的渲染组件
**需要注意** 不管设计器还是渲染器的组件都采用了`