https://github.com/zhonghuitech/vfg

VFG: Vue3 Form&Page Generator. 表单&页面生成框架。
https://github.com/zhonghuitech/vfg

form generator vue3

Last synced: 4 days ago
JSON representation

VFG: Vue3 Form&Page Generator. 表单&页面生成框架。

• Host: GitHub
• URL: https://github.com/zhonghuitech/vfg
• Owner: zhonghuitech
• Created: 2024-10-07T13:51:40.000Z (about 1 month ago)
• Default Branch: main
• Last Pushed: 2024-11-10T13:58:14.000Z (8 days ago)
• Last Synced: 2024-11-10T14:25:24.025Z (8 days ago)
• Topics: form, generator, vue3
• Language: TypeScript
• Homepage: https://zhonghuitech.github.io/vfg/
• Size: 38.3 MB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# VFG



     

     

     

      



[VFG](https://zhonghuitech.github.io/vfg/#/): Vue3 Form&Page Generator (based on Element-Plus).

## Usage

1. Install `vfg`

```sh

pnpm install vfg

```

2. Config `main.js`

```js

import { createApp } from 'vue'

import App from './App.vue'

import ElementPlus from 'element-plus'; // 三方依赖

import 'element-plus/theme-chalk/index.css';

import * as ElIcon from '@element-plus/icons-vue'

import zhCn from 'element-plus/es/locale/lang/zh-cn';

const app = createApp(App);

app.use(ElementPlus, {

    locale: zhCn,

});

Object.keys(ElIcon).forEach((key) => {

    app.component(key, ElIcon[key])

})

// vfg settings.

import { setupVFG } from "vfg"

import 'vfg/dist/assets/css/style.css';

import 'virtual:svg-icons-register'

setupVFG(app)

app.mount('#app')

```

3. Page use vfg

```vue

  


    

  


``` 

4. Full example

[vfg-usage-demo](https://github.com/zhonghuitech/vfg-usage-demo)

## Coding Live

[https://zhonghuitech.github.io/vfg/#/live](https://zhonghuitech.github.io/vfg/#/live)

## Project Setup

```sh

pnpm install

```

### Compile and Hot-Reload for playground

```sh

pnpm pg

```

### Type-Check, Compile and Minify for Production

```sh

pnpm build

```

### Run Unit Tests with [Vitest](https://vitest.dev/)

```sh

pnpm test:unit

```

## Tree Render Framework

![framework](docs/tree_render.png)