# 快速开始

## NPM 安装

```bash
npm i vjdesign
```

## 使用设计器

引用 vjdesign

```javascript
import Vue from 'vue'
import vjdesign from 'vjdesign'

Vue.use(vjdesign)
```

vue 中使用

```vue
<template>
  <v-jdesign v-model="value"></v-jdesign>
</template>

<script>
export default {
  data() {
    return { value: {} }
  }
}
</script>
```

## 使用配置文件

设计器的 v-model 属性输出了动态表单的配置，jformer 组件可直接使用配置呈现界面和功能

另一个项目中用 npm 安装 jformer

```bash
npm i jformer
```

引用 jformer

```javascript
import Vue from 'vue'
import jformer from 'jformer'

Vue.use(jformer)
```

使用 jformer 呈现界面

```vue
<template>
  <j-former v-model="value" :options="options" :params="args"></j-former>
</template>

<script>
export default {
  data() {
    return {
      value: {},
      options: { fields: [], datasource: {}, listeners: [] } // 设计器输出的配置
    }
  },
  computed: {
    args() {
      return this.$route.params // 可将路由参数或 querystring 作为额外参数传给表单
    }
  }
}
</script>
```

::: warning 注意

设计器和动态表单是依赖 vue 项目本身支持的组件名来呈现元素，因此设计器和动态表单项目至少要保证引用同样的组件

例如：

1. 设计器项目中 `Vue.use(ElementUI)` 那么使用配置的项目也要 `Vue.use(ElementUI)`

2. 设计器里引用的额外组件 `<v-jdesign components="components"></v-jdesign>`，使用配置的项目也需要引用 `<j-former components="components"></j-former>` (设计时用到的组件除外，例如给设计器用的某个单独开发的属性编辑器)

:::

## 使用 vjform 呈现界面

vjform 是设计器的基础依赖，只提供基础功能，如果想使用 vjform 呈现界面则需要安装扩展库

```bash
npm i jpresent-transform-design jpresent-transform-expression jpresent-vue-extends
```

引用依赖

```javascript
import Vue from 'vue'
import vjform from 'vjform'
import design from 'jpresent-transform-design'
import expression from 'jpresent-transform-expression'

vjform.use(design)
vjform.use(expression)

Vue.use(vjform)
```

使用 vjform 呈现界面

```vue
<template>
  <v-jform
    v-model="value"
    :fields="options.fields"
    :datasource="options.datasource"
    :listeners="options.listeners"
    :params="args"
  ></v-jform>
</template>

<script>
export default {
  data() {
    return {
      value: {},
      options: { fields: [], datasource: {}, listeners: [] } // 设计器输出的配置
    }
  },
  computed: {
    args() {
      return this.$route.params //可将路由参数或 querystring 作为额外参数传给表单
    }
  }
}
</script>
```

扩展库说明

| 库名                          | 说明                               |
| ----------------------------- | ---------------------------------- |
| jpresent-transform-design     | 设计器设置的属性值转换成真实属性值 |
| jpresent-transform-expression | 属性值表达式支持                   |
| jpresent-vue-extends          | scopedSlot 支持                    |