[](https://github.com/Tefact/tefact-saas)
[](https://github.com/tefact/tefact-saas/actions)
[](https://github.com/Tefact/tefact-saas/releases)
[](https://github.com/Tefact/tefact-saas/pulls)
[](https://lgtm.com/projects/g/Tefact/tefact-saas/alerts/)
# Tefact Engine [](https://discord.gg/7V5vnHW2)
星搭开源无代码编辑器，使用图形化界面生成 网站、H5和表单. 无需任何代码生成应用程序！
[English Docs]
[开发Demo]
依赖:
- [Vue 2.x](https://github.com/vuejs/vue)
- [ElementUI](https://github.com/ElemeFE/element)
- [Sass](https://github.com/sass/sass)
## 开始使用
推荐: 使用 [案例项目](https://github.com/staringos/tefact-example) 开始. 或者手动引入:
1. 安装依赖
```shell script
yarn add @tefact/editor
```
2. 引入样式文件
```ts
import "@tefact/editor/lib/index.css"
```
3. 引入并使用编辑器组件.
```vue
```
## 核心概念
### Target 编辑目标
Target 是你所编辑和存储的对象，可以是一个网页、H5或者表单. 他是一套JSON数据结构描述展示内容、样式和使用数据。
您可以使用 `@tefact/editor` 中的 `getDefaultFeature` 去生成默认的 Target 数据。编辑器经过编辑后，会修改对应的数据，您所需要做的就是把它保存起来，供下次调用使用。每个 Target 都有一个 featureType 属性，标识当前 Target 的类型。将 Target 可以引入 `@tefact/feature-form` 或 `@tefact/feature-page` 中，可以展示其内容。
### Editor 编辑器
`@tefact/editor` 是一个界面编辑器，用来提供给用户编辑 Target 的展示内容和样式信息
#### 参数
- value: 正在编辑的 Target 对象
- editorSetting: 编辑器设置
#### Event 事件
- editTarget: 当 Target 被修改后调用
- share: 当分享按钮被点击时调用
- save: 当保存按钮被点击时调用
- back: 返回按钮被点击时调用
### Page 页面
`@tefact/feature-page` 是一个查看组件，用来查看 `featureType = page` 的 `target` 对象. 使用案例:
```vue
```
### Form 表单
与 `page` 一样, `@tefact/feature-form` 也是一个预览组件，用来查看或预览 `featureType = form` 的 Target, 您可以:
```vue
```
## 贡献代码
优秀的开源社区需要大家的共同努力，欢迎 PRs 和 Issues.
[CONTRIBUTING](./CONTRIBUTING.md)
### 加入社区
微信扫码加入星搭微信群:
### Discord
[](https://discord.gg/7V5vnHW2)
