VvvebJs是一個開源的網(wǎng)頁拖拽自動生成的JavaScript庫，你可以以簡單拖拽的方式生成自己需要的網(wǎng)頁樣式，內(nèi)置jquery和Bootstrap，你可以拖拽相關的組件進行網(wǎng)頁的構(gòu)建，非常的方便，而且可以實時修改代碼，功能豐富，使用簡單，界面友好，特別適合一些專注于展示的網(wǎng)頁設計，需要的朋友不可錯過！

Github地址

https://github.com/givanz/VvvebJs

相關特性

• 1、組件和塊/片段拖放。

• 2、撤銷/重做操作。

• 3、一個或兩個面板界面。

• 4、文件管理器和組件層次結(jié)構(gòu)導航添加新頁面。

• 5、實時代碼編輯器。

• 6、包含示例php腳本的圖像上傳。

• 7、頁面下載或?qū)С鰄tml或保存頁面在服務器上包含示例PHP腳本。

• 8、組件/塊列表搜索。

• 9、Bootstrap 4組件等組件

默認情況下，編輯器附帶Bootstrap 4和Widgets組件，可以使用任何類型的組件和輸入進行擴展。

使用方式

如下代碼：

<!-- jquery-->
<script src="js/jquery.min.js"></script><script src="js/jquery.hotkeys.js"></script><!-- bootstrap--><script src="js/popper.min.js"></script><script src="js/bootstrap.min.js"></script><!-- builder code--><script src="libs/builder/builder.js"></script>	<!-- undo manager--><script src="libs/builder/undo.js"></script>	<!-- inputs--><script src="libs/builder/inputs.js"></script>	<!-- components--><script src="libs/builder/components-bootstrap4.js"></script>	<script src="libs/builder/components-widgets.js"></script>	<script>$(document).ready(function() {	Vvveb.Builder.init('demo/index.html', function() {		//load code after page is loaded here		Vvveb.Gui.init();	});});</script>

要初始化編輯器，調(diào)用Vvveb.Builder.init。第一個參數(shù)是要加載以進行編輯的URL，它必須位于相同的子域中才能進行編輯。第二個參數(shù)是頁面加載完成時調(diào)用的函數(shù)，默認情況下調(diào)用編輯器Gui.init();

• 結(jié)構(gòu)

設計界面預覽

總結(jié)

VvvebJs是一個非常強大的網(wǎng)頁可視化生成構(gòu)建工具，讓不懂網(wǎng)頁設計的小伙伴們也能夠通過拖拽來生成美觀大方的網(wǎng)頁出來，讓設計網(wǎng)頁就像設計圖片一樣，VvvebJs特別適合展示型網(wǎng)頁，甚至可以不需要代碼就能完成一項復雜的網(wǎng)頁設計，總體來說，VvvebJs是一個值得嘗試的工具！