基于 Vue 2.0 快速搭建中后台（hpaPaaS平台）数据驱动、可视化编辑的组件库
通过 Photoshop 导出 psd 文件，自动生成响应式页面能力
npm install --save yh5
npm install sass sass-loader fibers deepmerge -D添加至你的vue应用:
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,
}
})<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/yh5/dist/yh5.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/yh5/dist/yh5.min.js"></script>
<!-- v-swiper 依赖 vue-awesome-swiper -->
<!--<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/css/swiper.min.css" rel="stylesheet">-->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/js/swiper.min.js"></script>-->
<!--<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-awesome-swiper.js"></script>-->
</head>
<body>
<div id="app">
<v-canvas
height="100vh"
width="100vw"
v-model="data"
editable
absolute
>
</v-canvas>
</div>
<script>
new Vue({
el: '#app',
data: {
data: [
{
tag: 'img',
src: 'https://picsum.photos/id/11/500/300',
width: 300,
height: 300,
}
]
},
})
</script>
</body>
</html>