# 使用出码导出前端项目源码
在页面设计器中完成页面的可视化搭建、组件配置及逻辑编排后，如需将前端项目导出为标准的前端工程代码，用于二次开发、独立部署至自有服务器或代码包分享等场景，可通过UI引擎的"出码"功能实现前端项目源码导出。
#### 前提条件
- 已进入目标项目的页面设计器，具体操作请参见[进入前端项目页面设计器](https://support.huaweicloud.com/usermanual-idme/idme_ui_0014.html)。
- 已完成页面的创建、组件部件设计及相关逻辑配置。
- 如需[在本地环境运行前端项目]，需提前完成以下环境准备：
  - 本地已安装Node.js，具体操作可参考[手工部署Node.js（Windows）](https://support.huaweicloud.com/bestpractice-ecs/ecs_bp_6101.html)。
  
  - 本地已安装代码编辑器，如Visual Studio Code、WebStorm等前端开发工具。
   
 
#### 导出前端项目源码
1. 在页面设计器的顶部工具栏中，单击"出码"。
2. 等待系统完成代码生成，生成完毕后将自动弹出保存位置选择窗口。
3. 在弹出的窗口中指定源码在本地环境的存放路径。路径指定完成后，系统将自动切换至"请选择生成到本地的文件"窗口。 
   ![](https://support.huaweicloud.com/usermanual-idme/public_sys-resources/note_3.0-zh-cn.png)
   指定本地存放路径时，建议选择空目录或已存放该项目源码的目录。由于下载的源码内容为平铺结构，如目录中存在其他数据目录，可能会影响项目正常运行。
   
   
4. 根据实际业务需求，勾选需要生成到本地的文件，单击"确定"，系统将自动把源码下载至指定路径。
 
 #### 在本地环境运行前端项目
1. 使用代码编辑器（如VS Code、WebStorm）打开已下载的源码根目录，加载完整项目文件。
2. 打开代码编辑器内置终端或系统命令行工具，切换至项目根目录，执行如下命令，安装项目依赖。 
   ```
   npm install
   ```
   
   
3. 执行如下命令，启动本地服务。 
   ```
   npm run dev
   ```
   
   
4. 待服务启动成功后，通过浏览器访问本地地址，即可查看项目运行效果。 
   - **前端项目独立运行** ：
     当前端项目作为独立应用运行时，页面左侧完整展示"静态页面目录树"，其功能与页面设计器完全对齐，具体表现如下：
     - 支持搜索模糊查询功能。
     
     - 单击目录树中的任一静态页面节点，即可切换至对应页面。切换后的页面布局、交互行为及业务功能，均与页面设计器中的配置效果完全一致。
     
     
     图1项目独立运行示例   
     ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002581605163.png "点击放大") 
   
   - **前端项目嵌套运行** ：
     当项目被嵌套在其他应用中（如通过iframe嵌入）时，页面左侧的"静态页面目录树"将自动隐藏，仅展示页面主体内容，以适配嵌套宿主环境的布局规范，避免样式冲突。
     图2项目嵌套在其他应用示例   
     ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002550845472.png "点击放大")