Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/staringos/tefact
🏭 (Beta) 轻量级无代码/低代码 H5、表单编辑器。Lightweight no-code/low-code editor for website、H5 page and Form. Build your page without code!
https://github.com/staringos/tefact
admin-dashboard crud h5 low-code low-code-development-platform low-code-platform no-code nuxt typescript vue
Last synced: about 2 months ago
JSON representation
🏭 (Beta) 轻量级无代码/低代码 H5、表单编辑器。Lightweight no-code/low-code editor for website、H5 page and Form. Build your page without code!
- Host: GitHub
- URL: https://github.com/staringos/tefact
- Owner: staringos
- Created: 2020-04-20T02:23:25.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-07-20T00:30:49.000Z (about 1 year ago)
- Last Synced: 2024-06-26T03:33:00.562Z (3 months ago)
- Topics: admin-dashboard, crud, h5, low-code, low-code-development-platform, low-code-platform, no-code, nuxt, typescript, vue
- Language: Vue
- Homepage: https://staringos.com
- Size: 11.5 MB
- Stars: 334
- Watchers: 14
- Forks: 47
- Open Issues: 6
-
Metadata Files:
- Readme: README-CN.md
- Contributing: CONTRIBUTING.md
Awesome Lists containing this project
- awesome-lesscode - tefact - commit/staringos/tefact?label=%E6%9C%80%E5%90%8E%E6%9B%B4%E6%96%B0%E6%97%B6%E9%97%B4) (精选 LessCode 项目)
README
[](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和表单. 无需任何代码生成应用程序！
依赖:
- [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
import Vue from "vue";
import Editor, { getDefaultFeature } from "@tefact/editor";
export default Vue.extends({
data() {
return {
target: getDefaultFeature("page"),
editorSetting: {}
}
},
components: {
Editor
}
})
```
## 核心概念
### 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
import Vue from "vue";
import Page, { DFFAULT } from "@tefact/feature-page";
export default Vue.extends({
data() {
return {
target: DFFAULT
}
},
components: {
Page
}
})
```
### Form 表单
与 `page` 一样, `@tefact/feature-form` 也是一个预览组件，用来查看或预览 `featureType = form` 的 Target, 您可以:
```vue
import Vue from "vue";
import Form, { DFFAULT } from "@tefact/feature-page";
export default Vue.extends({
data() {
return {
target: DFFAULT
}
},
components: {
Form
}
})
```
## 贡献代码
优秀的开源社区需要大家的共同努力，欢迎 PRs 和 Issues.
[CONTRIBUTING](./CONTRIBUTING.md)
### 加入社区
微信扫码加入星搭微信群:
### Discord
[](https://discord.gg/7V5vnHW2)