form-engine-vue3/README.md

```json "dependencies": { "axios": "^0.21.1", "codemirror": "^5.62.2", "core-js": "^3.8.3", "element-plus": "^1.0.2-beta.33", "vue": "3.1.4", "vue-i18n": "^9.1.7", "vuedraggable": "^4.0.3" } "devDependencies": { "@vue/cli-plugin

# 表单引擎服务于 高校新平台 --- 针对 vue-next

# 版本相关问题---对于vue-next基于vuecli不同的版本对于模板编译有所不同
```json
"dependencies": {
  "axios": "^0.21.1",
  "codemirror": "^5.62.2",
  "core-js": "^3.8.3",
  "element-plus": "^1.0.2-beta.33",
  "vue": "3.1.4",
  "vue-i18n": "^9.1.7",
  "vuedraggable": "^4.0.3"
}
"devDependencies": {
  "@vue/cli-plugin-babel": "~5.0.0-beta.2",
  "@vue/cli-plugin-eslint": "~5.0.0-beta.2",
  "@vue/cli-service": "~5.0.0-beta.2"
}
```
# 插件安装
```shell
npm i form-engine-vue3 --save
# yarn
yarn add form-engine-vue3
```

# 插件使用

## 引入
`import FormEngineVue3 from 'form-engine-vue3'`

或者
`import {FormEngine, FormPreview} from 'form-engine-vue3'`

## 安装插件
```javascript
import { createApp } from 'vue'

const app = createApp(App)
app.use(FormEngine)
```

## 使用
```
<!-- 表单引擎的编辑 -->
<form-engine :evaluationId="41" :data='data' :stepId="50" :config="{
    getComs,
    getEvaluation,
    uploadImg
  }"></form-engine>

<!-- 表单引擎的预览 -->
<generate-form :data="data"></generate-form>
```
- 参数说明
```typescript
// form-engine 组件
const evaluationId?: string | number // 业务需要
interface EngineConfig {
  labelPosition: 'left' | 'right' | 'top'; // 标签的对去方式
  labelWidth: number; // 表单标签的宽度
  size: 'medium' | 'small' | 'mini'; //
}
/* 下面三个控件对应的类型不一一赘述 */
interface BaseComponent{}  // 基础包括单行文本等
interface AdvanceComponents{} // 图片控件
interface LayoutComponents{} // grid控件
interface EngineData {
  config: EngineConfig,
  list: Array<BaseComponent|AdvanceComponents|LayoutComponents>
}
const data: EngineData;
const stepId?: number; // 业务需要
const config?: Object; // 传入的内置方法

// generate-form 组件
const data: EngineData;
```
# 相关插件名字
`form-engine generate-form`