借力飞帆控件平台、轻松做网页

inksci

于 2025-05-02 07:18:40 发布

阅读量426

点赞数 18

文章标签：前端

本文链接：https://blog.csdn.net/qq_30049249/article/details/147652471

版权

这是我在本地的一个静态网站：

就是简单写了几个 demox.html

现在我需要写一个 index.html 用于告诉我这些 demox.html 是什么内容，以及我通过点击链接就可以访问。

我应该怎么写这个 index.html 呢？我打算借助飞帆来实现。来看看步骤：

首先访问飞帆：https://fvi.cn/

注册用户、登录。

然后新增一个网页：

然后趁浏览器不注意，我们编辑此网页：

这里面拖入了几个元素：

一个 div
在 div 中拖入了 <p> <a> <hr>

每个控件可以配置其属性：

满意后，克隆 div 得到多个。

一顿操作后，得到：

https://fvi.cn/779

生成的这个网页在互联网上，可是我需要的是本地的 index.html

怎么办呢？

是时候放大招了！来自于这篇教程：

将飞帆制作的网页作为 Vue 组件导入到自己的网页使用

https://fvi.cn/760

这是本地 index.html 的代码：

复制这里的代码，更改网页编号，这里是 779，保存即可！


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
    <title></title>
    <script src="https://fvi.cn/cdn/vue/2.6.10/vue.min.js"></script>
    <script src="https://fvi.cn/cdn/fvi/latest/fvi.js"></script>
</head>
<body>
    <div id="app">
        <fvi-div
            style="padding: 10px;"
            :elements="elements[779]" 
            >
        </fvi-div>
    </div>
</body>
<script type="text/javascript">
new Vue({
    el: "#app",
    data: {
        elements: {
          779: [],
        },
    },

    components: {
      'fvi-div': fvi.div,
    },

    created () {
        fvi.load(this.elements)
    },

    methods: {
    },  // methods
})
</script>
</html>