Erupt Web框架使用教程

Erupt Web框架使用教程

1. 项目介绍

Erupt Web是一个基于Angular的前端框架，旨在通过JSON Schema自动构建表单，实现Erupt开发过程中的零前端代码能力。它利用TypeScript、RxJS、Less和Angular等现代前端技术，结合ng-zorro-antd和ng-alain等UI库，为开发者提供了一套高效、可扩展的后台管理界面解决方案。

2. 项目快速启动

环境准备

在开始之前，请确保您的开发环境中安装了以下软件：

• Node.js（版本16.14.0或更高）
• npm 包管理器

您可以通过在终端中运行 node -v 命令来检查Node.js的版本。

安装步骤

1. 克隆项目到本地：

   git clone https://github.com/erupts/erupt-web.git
   cd erupt-web
   

2. 安装yarn：

   npm install -g yarn
   

3. 安装项目依赖：

   yarn install
   

4. 修改服务端地址（在 proxy.conf.js 文件中）：

   module.exports = {
     "/api": {
       "target": "http://your-backend-api-url",
       "secure": false,
       "changeOrigin": true,
       "logLevel": "debug"
     }
   };
   

5. 启动开发服务器：

   yarn start
   

启动后，您可以在浏览器中访问 http://localhost:4200 来查看项目。

打包编译

1. 修改打包路径（在 angular.json 文件中）：

   "projects": {
     "erupt-web": {
       "architect": {
         "build": {
           "options": {
             "outputPath": "dist/your-output-path"
           }
         }
       }
     }
   }
   

2. 执行打包命令：

   yarn run build
   

3. 应用案例和最佳实践

在实际开发中，Erupt Web可以用于构建各种后台管理界面。以下是一些应用案例和最佳实践：

• 表单构建：利用JSON Schema自动生成表单，减少手动编写表单代码的工作量。
• 数据展示：使用ng-zorro-antd组件库提供的数据表格、图表等组件，快速构建数据展示页面。
• 权限管理：通过Erupt框架的后端支持，实现细粒度的权限控制。
• 响应式设计：确保界面在不同设备和屏幕尺寸上都能良好展示。

4. 典型生态项目

Erupt Web框架是Erupt生态系统的一部分，以下是一些典型的生态项目：

• Erupt后端：提供后端服务的核心框架，支持RESTful API和GraphQL。
• Erupt示例项目：包含了许多使用Erupt框架开发的示例应用，可供学习和参考。
• Erupt插件：为Erupt框架提供了各种扩展功能，如数据导入导出、文件上传等。

以上就是Erupt Web框架的使用教程，希望对您的开发工作有所帮助。