https://github.com/qq15725/yh5

💬 Visual production tool, draggable, resizable, sketch for Vue 2.x
https://github.com/qq15725/yh5

draggable json-generator sketch vue yh5

Last synced: 2 months ago
JSON representation

💬 Visual production tool, draggable, resizable, sketch for Vue 2.x

• Host: GitHub
• URL: https://github.com/qq15725/yh5
• Owner: qq15725
• License: mit
• Created: 2019-12-15T06:33:50.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2022-03-11T02:21:19.000Z (almost 3 years ago)
• Last Synced: 2024-04-23T21:22:43.747Z (9 months ago)
• Topics: draggable, json-generator, sketch, vue, yh5
• Language: JavaScript
• Homepage: http://yh5js.com
• Size: 7.13 MB
• Stars: 59
• Watchers: 6
• Forks: 9
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        


  

      

  





  

    

  

  

    

  

  

    

  

  

    

  



> 基于 Vue 2.0 快速搭建中后台（hpaPaaS平台）数据驱动、可视化编辑的组件库

> 通过 Photoshop 导出 psd 文件，自动生成响应式页面能力

### Webpack 安装

```bash

npm install --save yh5

npm install sass sass-loader fibers deepmerge -D

```

添加至你的vue应用:

```javascript

import Vue from 'vue'

import Yh5 from 'yh5/lib/framework'

import {

  VCanvas,

  VDraggable,

  VResizable,

  VDraggableResizable,

} from 'yh5/lib/components'

Vue.use(Yh5, {

  components: {

    VCanvas,

    VDraggable,

    VResizable,

    VDraggableResizable,

  }

})

```

### 使用 CDN

```html

  

  

  

  

  

  

  



  

  



  new Vue({

    el: '#app',

    data: {

      data: [

        {

          tag: 'img',

          src: 'https://picsum.photos/id/11/500/300',

          width: 300,

          height: 300,

        }

      ]

    },

  })

```

### 参考

- [云凤蝶如何打造媲美 sketch 的自由画布](https://zhuanlan.zhihu.com/p/92469406)

- [云凤蝶自由画布之道：分层模型](https://zhuanlan.zhihu.com/p/97768853)

- [Vuetify（代码风格）](https://github.com/vuetifyjs/vuetify)