{"id":19217576,"url":"https://github.com/qq15725/yh5","last_synced_at":"2025-05-13T00:10:04.453Z","repository":{"id":36528907,"uuid":"228139600","full_name":"qq15725/yh5","owner":"qq15725","description":"💬 Visual production tool, draggable, resizable, sketch for Vue 2.x","archived":false,"fork":false,"pushed_at":"2022-03-11T02:21:19.000Z","size":7481,"stargazers_count":59,"open_issues_count":0,"forks_count":9,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-05-13T00:10:02.500Z","etag":null,"topics":["draggable","json-generator","sketch","vue","yh5"],"latest_commit_sha":null,"homepage":"http://yh5js.com","language":"JavaScript","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/qq15725.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-12-15T06:33:50.000Z","updated_at":"2024-09-22T08:57:50.000Z","dependencies_parsed_at":"2022-08-08T15:17:23.950Z","dependency_job_id":null,"html_url":"https://github.com/qq15725/yh5","commit_stats":null,"previous_names":[],"tags_count":34,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qq15725%2Fyh5","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qq15725%2Fyh5/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qq15725%2Fyh5/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qq15725%2Fyh5/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/qq15725","download_url":"https://codeload.github.com/qq15725/yh5/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253843215,"owners_count":21972873,"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":["draggable","json-generator","sketch","vue","yh5"],"created_at":"2024-11-09T14:22:51.737Z","updated_at":"2025-05-13T00:10:03.797Z","avatar_url":"https://github.com/qq15725.png","language":"JavaScript","funding_links":[],"categories":["![Open Source Love svg3](https://badges.frapsoft.com/os/v3/open-source.svg?v=103)"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"http://yh5js.com\" target=\"_blank\"\u003e\n      \u003cimg alt=\"Yh5 Logo\" width=\"200\" src=\"./logo.svg\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp\u003e\n  \u003ca href=\"https://www.npmjs.com/package/yh5\" target=\"_blank\"\u003e\n    \u003cimg alt=\"Version\" src=\"https://img.shields.io/npm/v/yh5.svg\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"http://yh5js.com\" target=\"_blank\"\u003e\n    \u003cimg alt=\"Documentation\" src=\"https://img.shields.io/badge/documentation-yes-brightgreen.svg\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/qq15725/yh5/graphs/commit-activity\" target=\"_blank\"\u003e\n    \u003cimg alt=\"Maintenance\" src=\"https://img.shields.io/badge/Maintained%3F-yes-green.svg\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/qq15725/yh5/blob/master/LICENSE\" target=\"_blank\"\u003e\n    \u003cimg alt=\"License: MIT\" src=\"https://img.shields.io/badge/License-MIT-yellow.svg\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003e 基于 Vue 2.0 快速搭建中后台（hpaPaaS平台）数据驱动、可视化编辑的组件库\n\n\u003e 通过 Photoshop 导出 psd 文件，自动生成响应式页面能力\n\n### Webpack 安装\n\n```bash\nnpm install --save yh5\n\nnpm install sass sass-loader fibers deepmerge -D\n```\n\n添加至你的vue应用:\n\n```javascript\nimport Vue from 'vue'\nimport Yh5 from 'yh5/lib/framework'\nimport {\n  VCanvas,\n  VDraggable,\n  VResizable,\n  VDraggableResizable,\n} from 'yh5/lib/components'\n\nVue.use(Yh5, {\n  components: {\n    VCanvas,\n    VDraggable,\n    VResizable,\n    VDraggableResizable,\n  }\n})\n```\n\n### 使用 CDN\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n  \u003clink href=\"https://cdn.jsdelivr.net/npm/yh5/dist/yh5.min.css\" rel=\"stylesheet\"\u003e\n  \u003cscript src=\"https://cdn.jsdelivr.net/npm/vue\"\u003e\u003c/script\u003e\n  \u003cscript src=\"https://cdn.jsdelivr.net/npm/yh5/dist/yh5.min.js\"\u003e\u003c/script\u003e\n\n  \u003c!-- v-swiper 依赖 vue-awesome-swiper --\u003e\n\n  \u003c!--\u003clink href=\"https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/css/swiper.min.css\" rel=\"stylesheet\"\u003e--\u003e\n  \u003c!--\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/js/swiper.min.js\"\u003e\u003c/script\u003e--\u003e\n  \u003c!--\u003cscript src=\"https://cdn.jsdelivr.net/npm/vue-awesome-swiper@3.1.2/dist/vue-awesome-swiper.js\"\u003e\u003c/script\u003e--\u003e\n\u003c/head\u003e\n\n\u003cbody\u003e\n\u003cdiv id=\"app\"\u003e\n  \u003cv-canvas\n    height=\"100vh\"\n    width=\"100vw\"\n    v-model=\"data\"\n    editable\n    absolute\n  \u003e\n  \u003c/v-canvas\u003e\n\u003c/div\u003e\n\n\u003cscript\u003e\n  new Vue({\n    el: '#app',\n    data: {\n      data: [\n        {\n          tag: 'img',\n          src: 'https://picsum.photos/id/11/500/300',\n          width: 300,\n          height: 300,\n        }\n      ]\n    },\n  })\n\u003c/script\u003e\n\u003c/body\u003e\n\n\u003c/html\u003e\n```\n\n### 参考\n\n- [云凤蝶如何打造媲美 sketch 的自由画布](https://zhuanlan.zhihu.com/p/92469406)\n- [云凤蝶自由画布之道：分层模型](https://zhuanlan.zhihu.com/p/97768853)\n- [Vuetify（代码风格）](https://github.com/vuetifyjs/vuetify)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqq15725%2Fyh5","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fqq15725%2Fyh5","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqq15725%2Fyh5/lists"}