Html网页中驱动Vue组件
Html网页中驱动Vue组件
通常Vue组件的使用办法，是通过vue-cli创建一个应用骨架，然后import相应组件，在应用中调用createApp创建app根结点，然后初始化整个页面、应用。
这样得到的应用，是需要进行编译、打包转换后的js/css等文件。
我希望是在手工弄一个原始纯净的HTML，将vue组件的js文件引入，然后初始化起来。
这样的做法类似于webpack的dll组件思想，组件应该是方便加载、适配、运行的，而不是必须编译、打包后才能正常支行。
1.前提
首先，能够这么做的vue组件，必须打包成umd之类的组件包。
2.目标组件
选定 X-Flowchart-Vue组件，gitee链接：https://gitee.com/tangafa/X-Flowchart-Vue
选定他的原因在于，这个组件的示例、初始加载代码不复杂。
如下即为组件使用示例App.vue的代码。
<style lang="less">
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
a {
font-weight: bold;
color: #2c3e50;
&.router-link-exact-active {
color: #42b983;
}
}
}
</style>
<template>
<div id="app">
<div id="xfc"></div>
</div>
</template>
<script>
import xfc from '../dist/xfc.umd.min.js'
import '../dist/xfc.css'
export default {
name: 'app',
mounted () {
const system = {
version: '1.0.0',
name: 'xfcDemo',
author: 'OXOYO',
description: 'xfcDemo',
title: 'xfcDemo',
logo: require('@/assets/images/logo.png'),
github: 'https://github.com/OXOYO/X-Flowchart-Vue',
githubPages: 'http://oxoyo.co/X-Flowchart-Vue/',
feedback: 'https://github.com/OXOYO/X-Flowchart-Vue/issues/new',
copyright: '©2019 - 2020 OXOYO All Rights Reserved.'
}
// 初始化
const xfcEditor = xfc({
el: '#xfc',
props: {
system
}
})
console.log('xfcEditor', xfcEditor)
xfcEditor.$nextTick(() => {
// FIXME API调用示例
// 初始化数据
xfcEditor.read({"nodes":[{"id":"g2","draggable":true,"type":"hexagon","label":"","labelCfg":{"position":"center","style":{"fontSize":16,"stroke":"#000000"}},"width":80,"height":40,"minWidth":20,"minHeight":20,"anchorPoints":[[0,0],[0.25,0],[0.5,0],[0.75,0],[1,0],[1,0.25],[1,0.5],[1,0.75],[1,1],[0.75,1],[0.5,1],[0.25,1],[0,1],[0,0.75],[0,0.5],[0,0.25]],"shapeControl":{"controllers":[[0,0,"nwse-resize"],[0,0.5,"ew-resize"],[0,1,"nesw-resize"],[0.5,0,"ns-resize"],[0.5,1,"ns-resize"],[1,0,"nesw-resize"],[1,0.5,"ew-resize"],[1,1,"nwse-resize"]],"rotate":true},"name":"XFC_NODE_Hexagon","x":279,"y":99,"size":[80,40],"style":{"fill":"#FFFFFF","fillOpacity":1,"stroke":"#000000","strokeOpacity":1,"lineWidth":1,"lineDash":[]},"groupId":""},{"id":"g4","draggable":true,"type":"circle","label":"","labelCfg":{"position":"center","style":{"fontSize":16,"stroke":"#000000"}},"width":80,"height":80,"minWidth":20,"minHeight":20,"anchorPoints":[[0,0],[0.25,0],[0.5,0],[0.75,0],[1,0],[1,0.25],[1,0.5],[1,0.75],[1,1],[0.75,1],[0.5,1],[0.25,1],[0,1],[0,0.75],[0,0.5],[0,0.25]],"shapeControl":{"controllers":[[0,0,"nwse-resize"],[0,0.5,"ew-resize"],[0,1,"nesw-resize"],[0.5,0,"ns-resize"],[0.5,1,"ns-resize"],[1,0,"nesw-resize"],[1,0.5,"ew-resize"],[1,1,"nwse-resize"]],"rotate":true},"name":"XFC_NODE_Circle","x":462,"y":92,"size":[80,80],"style":{"fill":"#FFFFFF","fillOpacity":1,"stroke":"#000000","strokeOpacity":1,"lineWidth":1,"lineDash":[]},"groupId":""}],"edges":[{"id":"g5","source":"g2","sourceAnchor":7,"target":"g4","label":"","labelCfg":{"position":"center","style":{"autoRotate":true,"fontSize":16,"stroke":"#000000"}},"attrs":{"start":"g2","end":"g4"},"style":{"lineAppendWidth":10,"stroke":"#000000","lineWidth":1,"strokeOpacity":1,"lineDash":[],"endArrow":{"path":"M0,0 L20,-10 L20,10 Z","d":0,"fill":"#000000","stroke":"#000000"}},"type":"x-line","startArrow":false,"endArrow":false,"startPoint":{"x":319.70710678118655,"y":99,"index":7},"endPoint":{"x":421.5,"y":92,"index":15},"targetAnchor":15}],"combos":[],"groups":[]})
// 保存图片
// xfcEditor.downloadImage()
})
}
}
</script>
3.转化css
示例App.vue包含了SCSS样式代码，转化成标准CSS，并不困难
如下：
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
}
#nav a {
font-weight: bold;
color: #2c3e50;
}
#nav a.router-link-exact-active {
color: #42b983;
}
</style>
4.页面初始化脚本
页面初始化脚本，对应vue组件的mounted ()函数内的代码，转化并简化后，如下：
<script>
//console.log(xfc)
const system = {
version: '1.0.0',
name: 'xfcDemo',
author: 'OXOYO',
description: 'xfcDemo',
title: 'xfcDemo',
logo: '/assets/x-flowchart/logo.png',
github: 'https://github.com/OXOYO/X-Flowchart-Vue',
githubPages: 'http://oxoyo.co/X-Flowchart-Vue/',
feedback: 'https://github.com/OXOYO/X-Flowchart-Vue/issues/new',
copyright: '©2019 - 2020 OXOYO All Rights Reserved.'
}
// 初始化
const xfcEditor = xfc.default({
el: '#xfc',
props: {
system
}
})
xfcEditor.$nextTick(() => {
// 初始化数据
xfcEditor.read({})
// 保存图片
// xfcEditor.downloadImage()
})
</script>
5.拼装
完整的HTML需要引入依赖的vue.runtime.min.js，组件的js与css等，如下：
<meta charset="utf-8">
<meta name="referrer" content="origin">
<meta http-equiv=X-UA-Compatible content="IE=edge">
<meta name=viewport content="width=device-width,initial-scale=1">
<title>xfc demo</title>
<style>
//.....
</style>
<script src="/assets/vue/v2.6.10/vue.runtime.min.js"></script>
<script src="/assets/x-flowchart/xfc.umd.js"></script>
<link rel="stylesheet" href="/assets/x-flowchart/xfc.css">
<div id="app">
<div id="xfc"></div>
</div>
<script>
//....
</script>
HTML中的/assets等目录即为网站部署的资源文件路径。
6.总结
vue组件的质量也是差别很大，这个组件封装得较好，外部使用的依赖等问题就少很多，也能基本展现在HTML中如何加载并使用vue组件了。
