Vue进阶之Vue项目实战（四）

出码功能

出码->1、直接序列化JSON 2、直接出代码code
出包->不需要将代码进行输出，只需要在对应的编辑器中间，编排引擎中间将对应的逻辑编排出来生成页面，点击发布就能一键将所有编排内容发布到公网上面进行访问。

知识介绍

1. 编辑器 -> 管理端
   发布上线 ->应用端
2. 但是一般很多公司产品的管理端和应用端结合，进行高度复用。
   这是因为，在管理端进行拖拽的时候，是比较消耗性能的，要更好的考虑性能，所以很多产品都会用 canvas，用画布的形式画、绘制 对齐的网格线，或者编排过程中的辅助线；但是在渲染过程中，在应用端是没有任何的辅助线和网格线，所以一般将管理端和应用端分开考虑。管理端和应用端中间的联系一般是组件的复用，但是在页面中，编排引擎，渲染器方面，他们俩不是高度复用

国外非常厉害的低代码平台：illa
对标产品：retool

将无代码往深入了做，就会涉及到低代码，低代码中需要做运行沙箱，运行式环境（微前端中具备）【qiankun】

渲染器

1. 渲染器 - 管理端(做编排)和应用端两端内容做抽象，管理端点击“部署”后，就到了应用端。
2. 管理端 - 编排引擎；应用端 - 渲染器

• router
  • layout
    • 管理端的渲染 PageLayoutView
      • 左中右模型
        • AppLeftPanel
        • AppEditorRenderer
          • LaptopPreviewer - 预览器
          • MobilePreviewer - 预览器
        • AppRightPanel
  • runner
    • 应用端 AppRunnerRenderer
      • 策略模型
        • LaptopPreviewer v-if=电脑；PC端渲染器
        • MobilePreviewer v-if=手机； 移动端渲染器

1. 问：想要它在小程序中也实现这样的效果，要怎么做？
   答：在管理端将页面编排好后会有一个JSON数据，通过这个JSON编写小程序端的渲染器，市面上的产品有：zion，专门做小程序无代码的；还有一个 towify
2. 问：现在页面编排完后，想要得到IOS和安卓端的产品，要怎么做？
   答：Vue用户使用uniapp做，uniapp把JSON解析写对应的渲染器后，uniapp直接多端打包，直接生成ios，安卓，h5，支付宝小程序，微信小程序；React使用Taro来做。
3. 如果单纯做ios和安卓，那么React使用React-Native,其他用Flutter都可以，这是对应不同的方案。
4. 因此看到需求的时候，要深入