{"id":16430275,"url":"https://github.com/fyl080801/vjdesign","last_synced_at":"2025-10-18T20:49:04.665Z","repository":{"id":39192975,"uuid":"247527335","full_name":"fyl080801/vjdesign","owner":"fyl080801","description":"Vue 界面可视化设计器，支持任何 html 标签以及项目中引用的组件，可实现仅通过配置文件就能增加支持的组件和组件属性","archived":false,"fork":false,"pushed_at":"2023-03-03T12:50:22.000Z","size":12587,"stargazers_count":545,"open_issues_count":14,"forks_count":108,"subscribers_count":13,"default_branch":"master","last_synced_at":"2024-04-28T05:48:25.097Z","etag":null,"topics":["designer","lowcode","visualization-tools","vue"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fyl080801.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2020-03-15T18:33:33.000Z","updated_at":"2024-04-26T14:02:50.000Z","dependencies_parsed_at":"2024-01-15T18:45:57.055Z","dependency_job_id":"ca469e53-42cc-4b69-98a6-7e7a862e0e97","html_url":"https://github.com/fyl080801/vjdesign","commit_stats":{"total_commits":331,"total_committers":4,"mean_commits":82.75,"dds":"0.19939577039274925","last_synced_commit":"b792b8dd56b24a59aebb363f57cbe88a33301026"},"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fyl080801%2Fvjdesign","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fyl080801%2Fvjdesign/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fyl080801%2Fvjdesign/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fyl080801%2Fvjdesign/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fyl080801","download_url":"https://codeload.github.com/fyl080801/vjdesign/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248647249,"owners_count":21139081,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["designer","lowcode","visualization-tools","vue"],"created_at":"2024-10-11T08:26:20.487Z","updated_at":"2025-10-18T20:49:04.578Z","avatar_url":"https://github.com/fyl080801.png","language":"Vue","funding_links":[],"categories":["Uncategorized","优秀组件","![Open Source Love svg3](https://badges.frapsoft.com/os/v3/open-source.svg?v=103)"],"sub_categories":["Uncategorized"],"readme":"# Vue Json Design\n\n![NPM](https://img.shields.io/npm/l/vjdesign)\n![npm](https://img.shields.io/npm/v/vjdesign)\n[![Build Status](https://travis-ci.org/fyl080801/vjdesign.svg?branch=master)](https://travis-ci.org/fyl080801/vjdesign)\n![GitHub Repo stars](https://img.shields.io/github/stars/fyl080801/vjdesign?style=social)\n\n[![star](https://gitee.com/fyl080801/vjdesign/badge/star.svg?theme=dark)](https://gitee.com/fyl080801/vjdesign/stargazers)\n\nVue 界面可视化设计器，基于 [vjform](https://github.com/fyl080801/vjform)\n\n本设计器特色功能就是可以支持任何 vue 项目中被引用的组件，不需要二次开发就可以定义支持的组件以及组件的属性，并且对组件的属性和数据的关系以及表单的交互行为也可以通过设计器配置实现\n\n![](https://tva1.sinaimg.cn/large/0081Kckwly1gm6ulep495j31n80u01kx.jpg)\n\n## 特性\n\n- 可视化拖拽布局\n- 支持任何 html 元素和 vue 项目中引用的组件\n- 支持数据关联和交互行为的编辑\n- 通过 json 格式数据就可扩展编辑器支持的组件和属性\n- 组件在设计器上呈现形式和属性编辑器支持二次开发\n\n## Getting Start\n\n### 运行项目\n\n克隆项目，执行\n\n```bash\nnpm install\n```\n\n之后\n\n```bash\nnpm run dev\n```\n\n### 使用 npm 包\n\n```bash\nnpm i vjdesign\n```\n\n```javascript\nimport Vue from 'vue'\nimport vjdesign from 'vjdesign'\nimport 'vjdesign/dist/vjdesign.css'\n\nVue.use(vjdesign)\n```\n\n## 相关链接\n\n[在线示例](https://fyl080801.github.io/vjdesign/example) 已追加导出功能，速度慢可访问 [国内环境](https://fyl080801.gitee.io/vjdesign)\n\n[使用文档](https://fyl080801.github.io/vjdesign/) 完善中...\n\n[动态表单呈现 jformer](https://gitee.com/fyl080801/jformer)\n\n\u003e 使用 `jformer` 组件可直接用设计器元数据中的 json 定义来呈现界面\n\n[动态表单呈现 vjform](https://github.com/fyl080801/vjform)\n\n\u003e 如果使用 `vjform` 作为呈现组件，则需要在 vjform 中引用 [表达式支持库](https://github.com/fyl080801/jpresent-transform-expression)、[vue 作用域转换](https://github.com/fyl080801/jpresent-vue-extends)、[设计器编辑转换](https://github.com/fyl080801/jpresent-transform-design)\n\n```javascript\nimport vjform from 'vjform'\nimport expression from 'jpresent-transform-expression'\n\nvjform.use(expression)\n```\n\n## 依赖\n\n### vjform 以及相关库\n\n- vjform\n\n可视化布局基于 vjform 扩展\n\n- jpresent-transform-modern\n\n基于属性名的简易转换模板 `\"$:text\": \"model.text1\"`\n\n- jpresent-transform-expression\n\n为了适应类似 excel 的习惯，将属性值是表达式的情况下直接作为转换来处理 `\"text\": \"$:model.text\"`\n\n- jpresent-vue-extends\n\n使组件支持设置 scopedSlot 属性，实现转换获取父级组件 scopedSlot 的作用域对象\n\n### Lodash\n\n使用了 `get` `set` `forEach` 等 API\n\n### Vue\n\n基于 `v2.5.9` 测试，理论上支持高于 `v2.4.0` 版本\n\n### vuedraggable\n\n实现拖拽布局\n\n### codemirror\n\n实现直接编辑配置数据\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffyl080801%2Fvjdesign","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffyl080801%2Fvjdesign","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffyl080801%2Fvjdesign/lists"}