VvvebJs 开源项目教程

2024-09-13 21:03:30作者：幸俭卉

1. 项目介绍

VvvebJs 是一个基于 Vanilla JavaScript 的拖放页面构建器库，无需依赖或构建工具，支持 Bootstrap 5。它允许用户通过简单的拖放操作来创建和定制网页，适用于博客、网站或电子商务商店的快速开发。

2. 项目快速启动

2.1 安装

首先，克隆 VvvebJs 仓库到本地：

git clone --recurse-submodules https://github.com/givanz/VvvebJs.git

2.2 运行

进入项目目录并启动编辑器：

cd VvvebJs

打开 editor.html 文件，你可以通过本地服务器（如 Apache 或 XAMPP）访问 http://localhost/editor.html。

2.3 示例代码

以下是一个简单的初始化示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VvvebJs 示例</title>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="libs/builder/builder.js"></script>
    <script src="libs/builder/undo.js"></script>
    <script src="libs/builder/inputs.js"></script>
    <script src="libs/builder/components-bootstrap5.js"></script>
    <script src="libs/builder/components-widgets.js"></script>
</head>
<body>
    <script>
        let pages = [
            { name: "narrow-jumbotron", title: "Jumbotron", url: "demo/narrow-jumbotron/index.html", file: "demo/narrow-jumbotron/index.html" },
            { name: "landing-page", title: "Landing page", url: "demo/landing/index.html", file: "demo/landing/index.html" }
        ];
        let firstPage = Object.keys(pages)[0];
        Vvveb.Builder.init(pages[firstPage]["url"], function() {
            // 页面加载后执行的代码
        });
        Vvveb.Gui.init();
        Vvveb.FileManager.init();
        Vvveb.SectionList.init();
        Vvveb.Breadcrumb.init();
        Vvveb.FileManager.addPages(pages);
        Vvveb.FileManager.loadPage(pages[firstPage]["name"]);
        Vvveb.Gui.toggleRightColumn(false);
        Vvveb.Breadcrumb.init();
    </script>
</body>
</html>