Avue Form Design

https://github.com/sscfaith/avue-form-design
Admin
A drag-and-drop form designer based on Avue, allowing for rapid form construction with a...
Tokens:782
Snippets:11
Trust Score:-
License:MIT
Update:1 year ago
Show doc for...
Tokens:
Raw
### Running Avue Form Design from Source

Source: https://github.com/sscfaith/avue-form-design/blob/master/README.md

Installs project dependencies and starts the development server for the Avue Form Design project from its source code. This is typically used for development or contributing to the project.

```sh
$ yarn
$ yarn serve
```

--------------------------------

### Installing Avue Dependency (npm)

Source: https://github.com/sscfaith/avue-form-design/blob/master/README.md

Installs the Avue library, a core dependency for the Avue Form Design project, using npm. Avue version 2.6.16 or higher is required.

```sh
$ npm i @smallwei/avue
```

--------------------------------

### Installing Element UI Dependency (npm)

Source: https://github.com/sscfaith/avue-form-design/blob/master/README.md

Installs the Element UI library, a required dependency for the Avue Form Design project, using npm. Element UI version 2.13.2 or higher is required.

```sh
$ npm i element-ui
```

--------------------------------

### Installing Avue Form Design Component

Source: https://github.com/sscfaith/avue-form-design/blob/master/README.md

Installs the Avue Form Design component as a package using either npm or yarn. This allows the component to be imported and used in a Vue.js project.

```sh
$ npm i @sscfaith/avue-form-design
或
$ yarn add @sscfaith/avue-form-design
```

--------------------------------

### Importing and Registering Avue Form Design

Source: https://github.com/sscfaith/avue-form-design/blob/master/README.md

Imports the AvueFormDesign component and registers it globally with Vue.js, making it available for use throughout the application. This is a standard Vue plugin installation pattern.

```JavaScript
import AvueFormDesign from '@sscfaith/avue-form-design'

Vue.use(AvueFormDesign)
```

--------------------------------

### Building Avue Form Design Component

Source: https://github.com/sscfaith/avue-form-design/blob/master/README.md

Executes the `yarn lib` command to build the Avue Form Design component for distribution. This typically generates a production-ready library file.

```sh
$ yarn lib
```

--------------------------------

### Building Avue Form Design from Source

Source: https://github.com/sscfaith/avue-form-design/blob/master/README.md

Executes the `yarn build` command to build the Avue Form Design project from its source code. This is used to create a production-ready application or distribution.

```sh
$ yarn build
```

--------------------------------

### Initializing Vue Instance with Avue Form Design - JavaScript

Source: https://github.com/sscfaith/avue-form-design/blob/master/examples/index.html

This snippet defines a Vue.js application instance, mounting it to the '#app' element. It includes a data property for 'options' (likely for form configuration) and a 'handleSubmit' method to process form data, demonstrating basic interaction with Avue Form Design.

```JavaScript
var app = new Vue({
  el: '#app',
  data: {
    options: { }
  },
  methods: {
    handleSubmit(data) {
      this.$message.success("查看控制台")
      console.log(data)
    }
  }
})
```

--------------------------------

### Integrating Avue Form Design Component in Template

Source: https://github.com/sscfaith/avue-form-design/blob/master/README.md

Demonstrates how to integrate the Avue Form Design component into a Vue template. It sets a height, binds `options` for field configuration, enables local storage with `storage`, and listens for the `submit` event to handle the generated JSON.

```HTML
<avue-form-design style="height: 86vh;"
                  :options="options"
                  storage
                  @submit="handleSubmit"></avue-form-design>
```

--------------------------------

### Registering Avue Form Design Plugin - JavaScript

Source: https://github.com/sscfaith/avue-form-design/blob/master/examples/index.html

This snippet registers the Avue Form Design plugin globally with Vue.js, making its components and functionalities available throughout the application. It's a prerequisite for using Avue Form Design.

```JavaScript
Vue.use(window.AvueFormDesign)
```

--------------------------------

### Integrating Avue Ueditor Rich Text Plugin

Source: https://github.com/sscfaith/avue-form-design/blob/master/README.md

Imports and registers the `avue-plugin-ueditor` for rich text editing within Avue forms. This extends the form design capabilities by adding a Ueditor component.

```JavaScript
import AvueUeditor from 'avue-plugin-ueditor'

Vue.use(AvueUeditor)
```
Tokens:
Raw