应用场景：
有时，我们的网页使用了某个模版，或者自己写的 html、css、javascript 代码。只是网页中的一部分使用飞帆来制作。这样的混合网页如何实现呢？
其实很容易，来体验一下飞帆提供的功能！
还记得这个网页吗？用飞帆来画 echarts 图：
https://fvi.cn/711
查看这个网页的源代码：
只有 39 行代码。
将这个代码只修改 vue.min.js 和 fvi.js 的地址，前缀加上 http://fvi.cn
进入可复制、运行代码：
https://andi.cn/page/622109.html
就是说，飞帆中网页源代码给我们启示了。我们只需要照葫芦画瓢，就能将飞帆制作的网页作为一部分集成到我们的网页中。
上面的 39 行代码，我们来梳理一下过程：
- 引入 vue.min.js 和 fvi.js 两个 js 库；
- 构建一个 Vue 的实现，包括 <div id="app">，new Vue，大家会使用 Vue2 的话，对这个就很熟悉了。不会用 Vue2 也没关系，咱参考代码照葫芦画瓢；
- 定义一个组件 components，代码中为 'fvi-div': fvi.div，前面的名称大家随意，后面为 fvi.div 就行，比如可以是：'xyz': fvi.div 这样；
- 在 data 中定义 elements；
- 在网页 html 元素中加入 <fvi-div></fvi-div> 或者是 <xyz></xyz> 根据第 3 步取的名称；
- 传入 elements 元素，像 :elements="elements" 这样；
- 在 created 函数中，加载飞帆网页：fvi.load(this.elements, 711) 这样。
进阶操作：
如果用飞帆制作了多个网页，将这多个网页作为一部分集成到自己网页中如何实现？
同样很容易，比如下面这两个用飞帆制作的网页：
https://fvi.cn/717
https://fvi.cn/711
我们首先给出代码，进入后可复制、运行代码：
https://andi.cn/page/622110.html
只需要修改这几个地方：
- 将 data 中的 elements: [] 修改为 elements: {711: [], 717: []}，你要集成哪几个飞帆的网页就写几个，多写也行，但没必要浪费；
- 在 created 函数中，加载飞帆网页由 fvi.load(this.elements, 711) 修改成 fvi.load(this.elements) 这样，反而更简单了，不用传第 2 个参数，因为 elements 中已经带了需要加载的网页的编号；
- 在 html 中不再是传入 :elements="elements" 而是更具体的 :elements="elements[711]" 即指定是哪个网页。
注意代码中，可以定义 <fvi-div> 的 style，实际上，此时飞帆的网页会作为一个 div 嵌入到你的网页中，所以将 <fvi-div> 作为 <div> 来使用。如果你知道怎么查看网页的元素，实际上它就是渲染成了一个 <div> 标签。
继续进阶操作：
飞帆网页中的元素如何和我网页中进行交互。
可以使用 fvi.Bus 来实现，这里给出一个例子的代码，具体的下次再聊，也欢迎您去探索后和我交流~
进入后可以复制、运行代码：
https://andi.cn/page/622111.html
我会继续完善这篇文章，感谢阅读！
