使用出码导出前端项目源码

前提条件

• 已进入目标项目的页面设计器，具体操作请参见进入前端项目页面设计器。
• 已完成页面的创建、组件部件设计及相关逻辑配置。
• 如需在本地环境运行前端项目，需提前完成以下环境准备：
  • 本地已安装Node.js，具体操作可参考手工部署Node.js（Windows）。
  • 本地已安装代码编辑器，如Visual Studio Code、WebStorm等前端开发工具。

导出前端项目源码

1. 在页面设计器的顶部工具栏中，单击“出码”。
2. 等待系统完成代码生成，生成完毕后将自动弹出保存位置选择窗口。
3. 在弹出的窗口中指定源码在本地环境的存放路径。路径指定完成后，系统将自动切换至“请选择生成到本地的文件”窗口。
   

   指定本地存放路径时，建议选择空目录或已存放该项目源码的目录。由于下载的源码内容为平铺结构，如目录中存在其他数据目录，可能会影响项目正常运行。

4. 根据实际业务需求，勾选需要生成到本地的文件，单击“确定”，系统将自动把源码下载至指定路径。

在本地环境运行前端项目

1. 使用代码编辑器（如VS Code、WebStorm）打开已下载的源码根目录，加载完整项目文件。
2. 打开代码编辑器内置终端或系统命令行工具，切换至项目根目录，执行如下命令，安装项目依赖。

   npm install

3. 执行如下命令，启动本地服务。

   npm run dev

4. 待服务启动成功后，通过浏览器访问本地地址，即可查看项目运行效果。
   • 前端项目独立运行：

     当前端项目作为独立应用运行时，页面左侧完整展示“静态页面目录树”，其功能与页面设计器完全对齐，具体表现如下：

     • 支持搜索模糊查询功能。
     • 单击目录树中的任一静态页面节点，即可切换至对应页面。切换后的页面布局、交互行为及业务功能，均与页面设计器中的配置效果完全一致。
     图1 项目独立运行示例
     
   • 前端项目嵌套运行：
     当项目被嵌套在其他应用中（如通过iframe嵌入）时，页面左侧的“静态页面目录树”将自动隐藏，仅展示页面主体内容，以适配嵌套宿主环境的布局规范，避免样式冲突。

     图2 项目嵌套在其他应用示例