pl-drag-template

前言

想必你一定使用過易企秀或百度H5等微場景生成工具制作過炫酷的h5頁面，除了感嘆其神奇之處有沒有想過其實現(xiàn)方式呢？本文從零開始實現(xiàn)一個H5編輯器項目完整設計思路和主要實現(xiàn)步驟，并開源前后端代碼。有需要的小伙伴可以按照該教程從零實現(xiàn)自己的H5編輯器。(實現(xiàn)起來并不復雜，該教程只是提供思路，并非最佳實踐)

一個h5可視化編輯器種子, 高仿凡科建站模板。

author: pl (剛剛才開源，更多問題請加入QQ交流群吧： 675286117)感謝點擊上方的Star！！！

大概圖形:?

拖動左邊組件到畫板區(qū)域釋放即可，或者點擊左邊區(qū)域的組件。

注意： 最好使用谷歌打開，點擊保存按鈕就是一串json數(shù)據(jù)，你可以吧這個數(shù)據(jù)拿到其他手機平臺進行渲染啦。有問題就加群 里面代碼注釋齊全，誰都看懂的哦

在這個模板的基礎上，你就可以實現(xiàn)類似凡科的模板(當然你還可以實現(xiàn)其他的類似模板)。如下圖就是我們產(chǎn)品的模樣

項目目錄

src {

apiUrl: 請路徑存放

assets: 項目資產(chǎn)存在(圖片等)

components: 公用組件存放

module: 模塊位置 {

畫板模塊的配置如下: {

components: 當前模塊的私有組件 {

attributeConfig： 右邊屬性配置組件

... 其他的都是畫板頁面的組件

}

pluginLibrary: 畫板的插件/模塊/組件(非常重要)

routers： 當前模塊的路由表

style： 當前畫板的樣式

utils： 公用js存放庫

vuex: 當前模塊的狀態(tài)存儲

viewPage: 當前模塊的頁面

index.js: 導出當前模塊

}

}

vuex: 整個項目的狀態(tài)存儲匯集地方

themes: 整個項目的公用樣式表集中地方

utils: 整個項目的工具文件夾

}

技術棧

前端：

vue: 模塊化開發(fā)少不了angular，react，vue三選一，這里選擇了vue。

vuex: 狀態(tài)管理

less: css預編譯器。

element-ui：不造輪子，有現(xiàn)成的優(yōu)秀的vue組件庫當然要用起來。沒有的自己再封裝一些就可以了。

loadsh：工具類

前端編輯器實現(xiàn)

編輯器的實現(xiàn)思路是：編輯器生成頁面JSON數(shù)據(jù)，服務端負責存取JSON數(shù)據(jù)，渲染時從服務端取數(shù)據(jù)JSON交給前端模板處理。

啟動運行

npm run dev

原文：https://www.cnblogs.com/plBlog/p/12567533.html

總結

以上是生活随笔為你收集整理的npm 可视化html编辑器,Vue + element从零打造一个H5页面可视化编辑器——pl-drag-template...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。