莫高设计图 使用代码框架分享

背景介绍

在莫高AI生成界面时，我们会看到设计效果非常漂亮，但将其嵌入画布后，页面会变成只可查看，无法进行交互，缺少应有的动态效果。这使得生成的页面更像设计师创作的静态图，而不具备实际开发中的交互性。

为了解决这一问题，我们将莫高生成的页面效果完整迁移到本地系统中，这样开发者就能更直观、更友好地操作页面，提升开发的灵活性与效率。

莫高生成的页面可能需要二次编辑，因此它会生成两种类型的文件：图片和代码。基于此需求，我们设计了四种兼容方法，来支持不同的实现方式。

1. 纯图片展示效果
2. 纯代码展示效果（PC端）
3. 图片作为背景，代码悬浮固定位置
4. 手机端代码实现

使用方法

根据不同的需求，以下是四种方法的具体操作步骤：

1. 纯代码展示效果（PC端）
   操作步骤：
   1、在莫高中直接下载代码文件。
   2、修改文件名为你所需的菜单名（文件名即为菜单名称）。
   3、将修改后的代码文件拖入 src/view 文件夹中，确保文件名不重复。
   

2. 纯图片展示效果
   操作步骤：
   1、下载生成的图片文件。
   2、修改图片文件名为你所需的菜单名（文件名即为菜单名称）。
   3、将修改后的图片文件拖入src/view 文件夹中，确保文件名不重复。
   

3. 图片 + 代码展示效果
   操作步骤：
   1、下载图片和相应的代码文件。
   2、创建一个新文件夹，文件夹名即为菜单名称，将图片和代码文件放入该文件夹中。
   3、修改代码文件名，文件名格式应为 x-y.vue，其中 x 和 y 是代码片在页面中的坐标位置（例如：100-100.vue）。如果命名不符合规范，会报错。
   4、将文件夹拖入 src/view 中。注意：一个文件夹内只能有一个图片文件，否则会报错。
   

4. 手机端代码实现
   操作步骤：
   1、在莫高中直接下载手机端代码文件。
   2、修改文件名，格式为 phone-*.vue，其中 * 为菜单名。
   3、将修改后的文件拖入 src/view 文件夹中，确保文件名不重复。
   

项目链接

你可以从以下链接下载相关文件，开始你的集成工作：项目链接