https://github.com/cc-edit/juggle

基于 vue + vant 实现的json页面渲染框架。使用json描述页面结构，从而实现页面的模板化、配置化。思路来源：双11活动广告页
https://github.com/cc-edit/juggle

json2vue jsontovuepage vue vue-cli-4 vuerender

Last synced: 21 days ago
JSON representation

基于 vue + vant 实现的json页面渲染框架。使用json描述页面结构，从而实现页面的模板化、配置化。思路来源：双11活动广告页

• Host: GitHub
• URL: https://github.com/cc-edit/juggle
• Owner: Cc-Edit
• License: mit
• Created: 2019-10-16T07:01:41.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2023-10-08T10:07:11.000Z (about 1 year ago)
• Last Synced: 2024-10-14T08:29:07.082Z (about 1 month ago)
• Topics: json2vue, jsontovuepage, vue, vue-cli-4, vuerender
• Language: JavaScript
• Homepage: https://juggle.ccedit.com/report.html?pageCode=0001
• Size: 5.15 MB
• Stars: 67
• Watchers: 5
• Forks: 29
• Open Issues: 19
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# juggle

## 配置项文档：https://github.com/Cc-Edit/juggle/blob/master/OPTIONS.md 

## 公告：   

项目目前只是一个简单的渲染工具，我希望它未来应该是一个功能更强大，配置更灵活的开发工具。    

目前能想到还未实现的大功能点如下：     

1. 静态配置文件的防缓存

2. 组件的按需打包，按需加载

3. 全局状态的约定以及管理

4. 拖拽布局后台实现

5. 复交互类型页面的配置

|                                      学习讨论小组🍻                                      |   打赏（赠送学习资料：[webNote](https://github.com/Cc-Edit/webNote)） :confetti_ball:    | 

|:----------------------------------------------------------------------------------:|:---------------------------------------------------------------------:| 

| ![wechat.png](https://github.com/Cc-Edit/Cc-Edit/blob/main/public/CcClip.png) |     ![img.png](https://github.com/Cc-Edit/Cc-Edit/blob/main/public/img.png)  |

## 介绍

    阿里推出飞冰来进行页面搭建，但是飞冰的物料开发不是想象中的简单。   

    开发此项目，可以直接使用市面上线程的组件库（iview, vux, Element），也可以基于现有组件库封装自定义组件。  

    通过拖拽布局，生成页面配置 json 文件，再通过json动态渲染页面。  

    此项目包含两部分，report.html模板渲染页面以及一个页面配置服务。  

    页面配置服务用来拖拽生成页面配置json文件，目前还在实现中，初期直接使用本地配置文件。   

    report.html模板渲染页面已经实现并已在线上进行验证   

### 方案说明：

在一个页面上承载多个页面，使页面配置化。首先想为什么这么做？这么做有什么好处？     

第一: 减少重复开发成本，多个页面，多个项目共有的自定义组件，需要有一套公共的仓库来进行维护。    

第二: 将简单工作交给PM或者运营。    

第三: 提高开发效率，以往做一个新页面的开发时间，使用配置生成只需要10分钟。     

抽象的看我们日常开发的页面，可以分为以下几类：  

1. 活动页  特点是动画样式丰富，活动可复用性高，配置灵活。  

2. 录入页  特点是表单校验，输入项校验。  

3. 回显页  特点是请求单向，没有用户操作。  

我们把按钮，输入框，日期选择等称为 元素，   

由不同的组合而成的具有特定功能的集合称为  组件，    

最终不同的组件集合起来就是一个页面模板。    

我们这次的项目目的就是实现页面模板化，基于现有的element，vuex，iview作为元素库。  

基于元素库封装自定义组件。然后通过组件的灵活配置，实现页面模板化。   

 

页面模板的载体是 report.html 页面   

页面模板文件为一个json文件，位于 public/pageConfig 目录下，以 config 开头的js文件。  

通过script标签异步引入，配置参数挂载到 window.__pageConfig__ 中，再通过Vue实例向下传递。  

页面由不同的组件搭建而成，按照组件用途分为以下三类：  

1. collection  容器级别组件，例如：下拉列表容器，展开收起容器，tab切换容器，侧边栏容器等  

2. block  块级别组件，用来展示数据的最小单元，例如：多行内容块，左右两列内容块， flex等分内容块等  

3. public  公共组件，例如：全局的提示窗，全局的页头页尾，全局的loading等  

以上组件分类位于/src/components目录下。  

再来思考一个问题，如果一个页面可配置，就要满足以下要求，我称之为约定：  

1. 同一个位置有可能放置任意组件，要求所有组件接受相同的参数。  

2. 基于第一点，要求每个组件对prop参数的要求应该是统一的。  

3. 组件之间应该有层级关系，容器级别组件（collection）拥有承载块级组件的能力（block）并且容器之间可以嵌套。  

4. 容器组件应该拥有自主获取数据的能力，例如三个tab标签切换时，每个tab都对应单独的接口以及列表。  

### 选型

首先此项目支持各种基于vue的前端ui组件库，例如：  

PC端：

    Element（https://github.com/ElemeFE/element）

    iview（https://github.com/iview/iview）

    muse-ui（https://github.com/museui/muse-ui）

    ant-design-vue（https://github.com/vueComponent/ant-design-vue）

    

移动端：

    mint-ui（https://github.com/ElemeFE/mint-ui）

    vant（https://github.com/youzan/vant）

    cube-ui（https://github.com/didi/cube-ui）

    

因为vux对vue-cli2.0以上版本不支持，所以不再支持的组件库中。 

此项目使用有赞团队的 vant 作为基础组件库，vant在组件数量，对新版本vue/cli的支持程度，以及更新维护的频率都优于其他框架。

如果你有自己喜欢的组件库，可以手动安装，直接使用即可。

### demo:

之前实现的组件因为太定制化了，所以不太适合开源出来给大家看。

所以在这里我们从头开始重新实现，具体实现的是一个电商平台的落地页。

最近是双十一，各个电商平台开始做大量的活动，与之对应的是大量的落地页。

我印象中之前看到过一篇文章，大致是讲阿里的落地页都是自动生成的。

细粒度的组件化，加上服务端渲染是可以实现动态生成页面的。

由渲染服务器根据接口内容来判断用什么组件。

由于只是demo，很多细节不会做的很细，只是给大家演示一下工作方式。

真正的组件需要结合业务进行整理，抽象出自己的组件库，电商多是展示，B端多是列表，场景不同通用组件就不同。

### 新增组件步骤：

每次接触到新需求时，应该尽可能抽象出来成为独立组件，不论是从提高开发效率的角度还是提高测试效率的角度看，这么做都是必要的。

juggle不关注组件，只关注结构。所以你可以直接引入组件库的组件，也可以基于组件库二次开发封装一个新的组件。

新的组件放在 /src/components/ 目录下。按照组件类型区分为block，container，public。

在对应目录下新增组件文件即可。

第二步是将新添加的组件注册到 /src/htmls/main/report.js 入口的mixin中即可

简单两步就可以在配置中使用该组件了：

```

   {

       "templateId": "BlockFlexBox",

       "prop": {

         "dataKeyChain": "bannerList",

         "styleOptions":{}

       },

       "childItem": []

   }

```

要注意，juggle的结构对组件的prop进行了约定，只有：prop，childItem，baseData 三个参数。

也就是说，新组件的所有参数都要包含在 prop 下，在组件内部进行拆解。

### 本地运行：

clone 此项目，依次执行以下命令

```

	$ npm install 

	$ npm run serve

```

打开页面即可查看：http://localhost:8080/report.html?pageCode=0001